Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3736 stevensc 1 
import React, { createContext, useContext } from 'react';
2 
import { Link } from 'react-router-dom';
3 
import { Card, CardContent, CardHeader } from '@shared/components';
4 
 
5 
const NavigationMenuContext = createContext();
6 
 
7 
const NavigationMenu = ({
8 
  basePath,
9 
  children,
10 
  showContainer = true,
11 
  containerProps = {},
12 
  className = '',
13 
  title = ''
14 
}) => {
15 
  const contextValue = {
16 
    basePath,
17 
    showContainer,
18 
    containerProps,
19 
    className
20 
  };
21 
 
22 
  return (
23 
    <NavigationMenuContext.Provider value={contextValue}>
24 
      {showContainer ? (
25 
        <Card {...containerProps}>
26 
          {title && <CardHeader title={title} />}
27 
          <CardContent>
28 
            <div
29 
              className={className}
30 
              style={{
31 
                display: 'flex',
32 
                flexDirection: 'column',
33 
                gap: '0.5rem'
34 
              }}
35 
            >
36 
              {children}
37 
            </div>
38 
          </CardContent>
39 
        </Card>
40 
      ) : (
41 
        <div
42 
          className={className}
43 
          style={{
44 
            display: 'flex',
45 
            flexDirection: 'column',
46 
            gap: '0.5rem'
47 
          }}
48 
        >
49 
          {children}
50 
        </div>
51 
      )}
52 
    </NavigationMenuContext.Provider>
53 
  );
54 
};
55 
 
56 
NavigationMenu.Container = ({ children, className = '', style = {} }) => {
57 
  return (
58 
    <div
59 
      className={className}
60 
      style={{
61 
        display: 'flex',
62 
        flexDirection: 'column',
63 
        gap: '0.5rem',
64 
        ...style
65 
      }}
66 
    >
67 
      {children}
68 
    </div>
69 
  );
70 
};
71 
NavigationMenu.Container.displayName = 'NavigationMenu.Container';
72 
 
73 
NavigationMenu.Item = ({
74 
  path = '',
75 
  label,
76 
  isActive = false,
77 
  disabled = false,
78 
  style = {},
79 
  linkProps = {},
80 
  children,
81 
  ...rest
82 
}) => {
83 
  const context = useContext(NavigationMenuContext);
84 
 
85 
  if (!context) {
86 
    throw new Error('NavigationMenu.Item must be used within NavigationMenu');
87 
  }
88 
 
89 
  const { basePath } = context;
90 
  const displayText = children || label;
91 
 
92 
  if (disabled) {
93 
    return (
94 
      <span
95 
        style={{
96 
          opacity: 0.5,
97 
          cursor: 'not-allowed',
98 
          ...style
99 
        }}
100 
        {...rest}
101 
      >
102 
        {displayText}
103 
      </span>
104 
    );
105 
  }
106 
 
107 
  return (
108 
    <Link
109 
      to={`${basePath}${path}`}
110 
      style={{
111 
        fontWeight: isActive ? 'bold' : 'normal',
112 
        textDecoration: 'none',
113 
        color: 'inherit',
114 
        ...style
115 
      }}
116 
      {...linkProps}
117 
      {...rest}
118 
    >
119 
      {displayText}
120 
    </Link>
121 
  );
122 
};
123 
NavigationMenu.Item.displayName = 'NavigationMenu.Item';
124 
 
125 
NavigationMenu.Divider = ({ style = {}, ...rest }) => {
126 
  return (
127 
    <hr
128 
      style={{
129 
        border: 'none',
130 
        borderTop: '1px solid #e0e0e0',
131 
        margin: '0.25rem 0',
132 
        ...style
133 
      }}
134 
      {...rest}
135 
    />
136 
  );
137 
};
138 
NavigationMenu.Divider.displayName = 'NavigationMenu.Divider';
139 
 
140 
NavigationMenu.Group = ({ children, style = {}, ...rest }) => {
141 
  return (
142 
    <div
143 
      style={{
144 
        display: 'flex',
145 
        flexDirection: 'column',
146 
        gap: '0.5rem',
147 
        ...style
148 
      }}
149 
      {...rest}
150 
    >
151 
      {children}
152 
    </div>
153 
  );
154 
};
155 
NavigationMenu.Group.displayName = 'NavigationMenu.Group';
156 
 
157 
NavigationMenu.fromItems = ({ basePath, items = [], ...props }) => {
158 
  return (
159 
    <NavigationMenu basePath={basePath} {...props}>
160 
      {items.map((item, index) => (
161 
        <NavigationMenu.Item
162 
          key={index}
163 
          path={item.path || item.href || ''}
164 
          label={item.label || item.text || item.title || ''}
165 
          isActive={item.isActive || false}
166 
          disabled={item.disabled || false}
167 
          style={item.style}
168 
          linkProps={item.linkProps}
169 
        />
170 
      ))}
171 
    </NavigationMenu>
172 
  );
173 
};
174 
NavigationMenu.fromItems.displayName = 'NavigationMenu.fromItems';
175 
 
176 
export { NavigationMenu };