glints-aries 4.0.197 → 4.0.198
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/@next/IndexTable/IndexTable.d.ts +3 -2
- package/es/@next/IndexTable/IndexTable.js +14 -5
- package/es/@next/IndexTable/components/LoadingState/LoadingState.d.ts +7 -0
- package/es/@next/IndexTable/components/LoadingState/LoadingState.js +19 -0
- package/es/@next/IndexTable/components/LoadingState/LoadingStateStyle.d.ts +2 -0
- package/es/@next/IndexTable/components/LoadingState/LoadingStateStyle.js +10 -0
- package/es/@next/IndexTable/components/LoadingState/index.d.ts +1 -0
- package/es/@next/IndexTable/components/LoadingState/index.js +1 -0
- package/es/@next/Switch/Switch.d.ts +8 -0
- package/es/@next/Switch/Switch.js +23 -0
- package/es/@next/Switch/Switch.stories.d.ts +4 -0
- package/es/@next/Switch/SwitchStyle.d.ts +3 -0
- package/es/@next/Switch/SwitchStyle.js +15 -0
- package/es/@next/Switch/index.d.ts +1 -0
- package/es/@next/Switch/index.js +1 -0
- package/es/@next/index.d.ts +1 -0
- package/es/@next/index.js +2 -1
- package/lib/@next/IndexTable/IndexTable.d.ts +3 -2
- package/lib/@next/IndexTable/IndexTable.js +12 -4
- package/lib/@next/IndexTable/components/LoadingState/LoadingState.d.ts +7 -0
- package/lib/@next/IndexTable/components/LoadingState/LoadingState.js +25 -0
- package/lib/@next/IndexTable/components/LoadingState/LoadingStateStyle.d.ts +2 -0
- package/lib/@next/IndexTable/components/LoadingState/LoadingStateStyle.js +17 -0
- package/lib/@next/IndexTable/components/LoadingState/index.d.ts +1 -0
- package/lib/@next/IndexTable/components/LoadingState/index.js +9 -0
- package/lib/@next/Switch/Switch.d.ts +8 -0
- package/lib/@next/Switch/Switch.js +29 -0
- package/lib/@next/Switch/Switch.stories.d.ts +4 -0
- package/lib/@next/Switch/SwitchStyle.d.ts +3 -0
- package/lib/@next/Switch/SwitchStyle.js +23 -0
- package/lib/@next/Switch/index.d.ts +1 -0
- package/lib/@next/Switch/index.js +9 -0
- package/lib/@next/index.d.ts +1 -0
- package/lib/@next/index.js +3 -1
- package/package.json +1 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { IndexTableProps } from 'polaris-glints';
|
|
2
|
+
import { IndexTableProps as PolarisIndexTableProps } from 'polaris-glints';
|
|
3
|
+
declare type IndexTableProps = Omit<PolarisIndexTableProps, 'emptySearchTitle'>;
|
|
3
4
|
declare const IndexTable: {
|
|
4
|
-
({ bulkActions, children, itemCount, selectedItemsCount, ...props }: IndexTableProps): JSX.Element;
|
|
5
|
+
({ bulkActions, children, itemCount, selectedItemsCount, loading, emptyState, ...props }: IndexTableProps): JSX.Element;
|
|
5
6
|
Cell: React.NamedExoticComponent<import("polaris-glints/build/ts/latest/src/components/IndexTable").CellProps>;
|
|
6
7
|
Row: ({ children, ...props }: import("polaris-glints").RowProps) => JSX.Element;
|
|
7
8
|
};
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount"],
|
|
3
|
+
var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount", "loading", "emptyState"],
|
|
4
4
|
_excluded2 = ["checked", "onChange"];
|
|
5
5
|
import React from 'react';
|
|
6
|
-
import { Cell, IndexTable as PolarisIndexTable
|
|
6
|
+
import { Cell, IndexTable as PolarisIndexTable } from 'polaris-glints';
|
|
7
7
|
import { Checkbox } from '../Checkbox';
|
|
8
8
|
import { Row } from './components/Row/Row';
|
|
9
9
|
import { StyledIndexTable } from './IndexTableStyle';
|
|
10
|
+
import { LoadingState } from './components/LoadingState';
|
|
10
11
|
var IndexTable = function IndexTable(_ref) {
|
|
11
12
|
var bulkActions = _ref.bulkActions,
|
|
12
13
|
children = _ref.children,
|
|
13
14
|
itemCount = _ref.itemCount,
|
|
14
15
|
selectedItemsCount = _ref.selectedItemsCount,
|
|
16
|
+
loading = _ref.loading,
|
|
17
|
+
emptyState = _ref.emptyState,
|
|
15
18
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
16
19
|
var renderCheckboxHeader = function renderCheckboxHeader(_ref2) {
|
|
17
20
|
var checked = _ref2.checked,
|
|
@@ -26,11 +29,17 @@ var IndexTable = function IndexTable(_ref) {
|
|
|
26
29
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIndexTable, null), /*#__PURE__*/React.createElement(PolarisIndexTable, _extends({
|
|
27
30
|
bulkActions: bulkActions,
|
|
28
31
|
checkbox: renderCheckboxHeader,
|
|
29
|
-
itemCount: itemCount,
|
|
30
|
-
selectedItemsCount: selectedItemsCount
|
|
32
|
+
itemCount: loading ? 0 : itemCount,
|
|
33
|
+
selectedItemsCount: selectedItemsCount,
|
|
34
|
+
emptySearchTitle: null,
|
|
35
|
+
loading: false,
|
|
36
|
+
emptyState: loading ? /*#__PURE__*/React.createElement(LoadingState, {
|
|
37
|
+
label: props.loadingLabel,
|
|
38
|
+
colSpan: props.headings.length
|
|
39
|
+
}) : emptyState
|
|
31
40
|
}, props), children));
|
|
32
41
|
};
|
|
33
42
|
IndexTable.Cell = Cell;
|
|
34
43
|
IndexTable.Row = Row;
|
|
35
44
|
export { useIndexResourceState } from 'polaris-glints';
|
|
36
|
-
export { IndexTable
|
|
45
|
+
export { IndexTable };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Spinner } from '../../../Spinner';
|
|
3
|
+
import { Blue, Neutral } from '../../../utilities/colors';
|
|
4
|
+
import { LoadingStateContainer, SpinnerContainer } from './LoadingStateStyle';
|
|
5
|
+
import { Typography } from '../../../Typography';
|
|
6
|
+
export var LoadingState = function LoadingState(_ref) {
|
|
7
|
+
var colSpan = _ref.colSpan,
|
|
8
|
+
label = _ref.label;
|
|
9
|
+
return /*#__PURE__*/React.createElement(LoadingStateContainer, {
|
|
10
|
+
colSpan: colSpan + 1
|
|
11
|
+
}, /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
|
|
12
|
+
height: 48,
|
|
13
|
+
width: 48,
|
|
14
|
+
fill: Blue.S99
|
|
15
|
+
}), /*#__PURE__*/React.createElement(Typography, {
|
|
16
|
+
variant: "subtitle1",
|
|
17
|
+
color: Neutral.B18
|
|
18
|
+
}, label)));
|
|
19
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { Breakpoints } from '../../..';
|
|
3
|
+
export var LoadingStateContainer = styled.td.withConfig({
|
|
4
|
+
displayName: "LoadingStateStyle__LoadingStateContainer",
|
|
5
|
+
componentId: "sc-1pvfz22-0"
|
|
6
|
+
})(["height:480px;"]);
|
|
7
|
+
export var SpinnerContainer = styled.div.withConfig({
|
|
8
|
+
displayName: "LoadingStateStyle__SpinnerContainer",
|
|
9
|
+
componentId: "sc-1pvfz22-1"
|
|
10
|
+
})(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-direction:column;gap:16px;p{margin:0;}@media (max-width:", "){position:absolute;top:0;left:0;}"], Breakpoints.large);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './LoadingState';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './LoadingState';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
|
|
3
|
+
checked?: boolean;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
onChange: () => void;
|
|
6
|
+
value: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
+
var _excluded = ["checked", "disabled", "onChange", "value"];
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { InputStyle, LabelStyle, SwitchStyle } from './SwitchStyle';
|
|
6
|
+
export var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref, ref) {
|
|
7
|
+
var checked = _ref.checked,
|
|
8
|
+
disabled = _ref.disabled,
|
|
9
|
+
onChange = _ref.onChange,
|
|
10
|
+
value = _ref.value,
|
|
11
|
+
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
12
|
+
return /*#__PURE__*/React.createElement(LabelStyle, null, /*#__PURE__*/React.createElement(InputStyle, _extends({
|
|
13
|
+
value: value
|
|
14
|
+
}, otherProps, {
|
|
15
|
+
disabled: disabled,
|
|
16
|
+
defaultChecked: checked,
|
|
17
|
+
type: "checkbox",
|
|
18
|
+
onChange: onChange,
|
|
19
|
+
ref: ref
|
|
20
|
+
})), /*#__PURE__*/React.createElement(SwitchStyle, {
|
|
21
|
+
"data-disabled": disabled
|
|
22
|
+
}));
|
|
23
|
+
});
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const SwitchStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const InputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
3
|
+
export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { Breakpoints, Spacing } from '..';
|
|
3
|
+
import { Blue, Neutral } from '../utilities/colors';
|
|
4
|
+
export var SwitchStyle = styled.div.withConfig({
|
|
5
|
+
displayName: "SwitchStyle",
|
|
6
|
+
componentId: "sc-7dlucf-0"
|
|
7
|
+
})(["position:relative;width:", ";height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";}border-radius:", ";padding:0;transition:300ms all;@media (max-width:", "){width:38px;height:22px;}&:before{transition:100ms all;content:'';position:absolute;width:16px;height:16px;border-radius:16px;top:50%;left:4px;background:", ";transform:translate(0,-50%);@media (max-width:", "){width:14px;height:14px;}}"], Spacing.space40, Spacing.space24, Neutral.B40, Neutral.B95, Spacing.space24, Breakpoints.large, Neutral.B100, Breakpoints.large);
|
|
8
|
+
export var InputStyle = styled.input.withConfig({
|
|
9
|
+
displayName: "SwitchStyle__InputStyle",
|
|
10
|
+
componentId: "sc-7dlucf-1"
|
|
11
|
+
})(["opacity:0;position:absolute;&:checked + ", "{background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{transform:translate(16px,-50%);}}"], SwitchStyle, Blue.S99, Neutral.B95);
|
|
12
|
+
export var LabelStyle = styled.label.withConfig({
|
|
13
|
+
displayName: "SwitchStyle__LabelStyle",
|
|
14
|
+
componentId: "sc-7dlucf-2"
|
|
15
|
+
})(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Switch';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Switch';
|
package/es/@next/index.d.ts
CHANGED
|
@@ -29,3 +29,4 @@ export { TextInput, TextInputProps } from './TextInput';
|
|
|
29
29
|
export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
|
|
30
30
|
export { Typography, TypographyProps } from './Typography';
|
|
31
31
|
export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
|
|
32
|
+
export { Switch } from './Switch';
|
package/es/@next/index.js
CHANGED
|
@@ -29,4 +29,5 @@ export { Tag, TagProps } from './Tag';
|
|
|
29
29
|
export { TextInput, TextInputProps } from './TextInput';
|
|
30
30
|
export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
|
|
31
31
|
export { Typography, TypographyProps } from './Typography';
|
|
32
|
-
export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
|
|
32
|
+
export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
|
|
33
|
+
export { Switch } from './Switch';
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { IndexTableProps } from 'polaris-glints';
|
|
2
|
+
import { IndexTableProps as PolarisIndexTableProps } from 'polaris-glints';
|
|
3
|
+
declare type IndexTableProps = Omit<PolarisIndexTableProps, 'emptySearchTitle'>;
|
|
3
4
|
declare const IndexTable: {
|
|
4
|
-
({ bulkActions, children, itemCount, selectedItemsCount, ...props }: IndexTableProps): JSX.Element;
|
|
5
|
+
({ bulkActions, children, itemCount, selectedItemsCount, loading, emptyState, ...props }: IndexTableProps): JSX.Element;
|
|
5
6
|
Cell: React.NamedExoticComponent<import("polaris-glints/build/ts/latest/src/components/IndexTable").CellProps>;
|
|
6
7
|
Row: ({ children, ...props }: import("polaris-glints").RowProps) => JSX.Element;
|
|
7
8
|
};
|
|
@@ -7,18 +7,20 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
7
7
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _polarisGlints = require("polaris-glints");
|
|
10
|
-
exports.IndexTableProps = _polarisGlints.IndexTableProps;
|
|
11
10
|
exports.useIndexResourceState = _polarisGlints.useIndexResourceState;
|
|
12
11
|
var _Checkbox = require("../Checkbox");
|
|
13
12
|
var _Row = require("./components/Row/Row");
|
|
14
13
|
var _IndexTableStyle = require("./IndexTableStyle");
|
|
15
|
-
var
|
|
14
|
+
var _LoadingState = require("./components/LoadingState");
|
|
15
|
+
var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount", "loading", "emptyState"],
|
|
16
16
|
_excluded2 = ["checked", "onChange"];
|
|
17
17
|
var IndexTable = function IndexTable(_ref) {
|
|
18
18
|
var bulkActions = _ref.bulkActions,
|
|
19
19
|
children = _ref.children,
|
|
20
20
|
itemCount = _ref.itemCount,
|
|
21
21
|
selectedItemsCount = _ref.selectedItemsCount,
|
|
22
|
+
loading = _ref.loading,
|
|
23
|
+
emptyState = _ref.emptyState,
|
|
22
24
|
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
|
|
23
25
|
var renderCheckboxHeader = function renderCheckboxHeader(_ref2) {
|
|
24
26
|
var checked = _ref2.checked,
|
|
@@ -33,8 +35,14 @@ var IndexTable = function IndexTable(_ref) {
|
|
|
33
35
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_IndexTableStyle.StyledIndexTable, null), /*#__PURE__*/_react["default"].createElement(_polarisGlints.IndexTable, (0, _extends2["default"])({
|
|
34
36
|
bulkActions: bulkActions,
|
|
35
37
|
checkbox: renderCheckboxHeader,
|
|
36
|
-
itemCount: itemCount,
|
|
37
|
-
selectedItemsCount: selectedItemsCount
|
|
38
|
+
itemCount: loading ? 0 : itemCount,
|
|
39
|
+
selectedItemsCount: selectedItemsCount,
|
|
40
|
+
emptySearchTitle: null,
|
|
41
|
+
loading: false,
|
|
42
|
+
emptyState: loading ? /*#__PURE__*/_react["default"].createElement(_LoadingState.LoadingState, {
|
|
43
|
+
label: props.loadingLabel,
|
|
44
|
+
colSpan: props.headings.length
|
|
45
|
+
}) : emptyState
|
|
38
46
|
}, props), children));
|
|
39
47
|
};
|
|
40
48
|
exports.IndexTable = IndexTable;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
exports.__esModule = true;
|
|
5
|
+
exports.LoadingState = void 0;
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
var _Spinner = require("../../../Spinner");
|
|
8
|
+
var _colors = require("../../../utilities/colors");
|
|
9
|
+
var _LoadingStateStyle = require("./LoadingStateStyle");
|
|
10
|
+
var _Typography = require("../../../Typography");
|
|
11
|
+
var LoadingState = function LoadingState(_ref) {
|
|
12
|
+
var colSpan = _ref.colSpan,
|
|
13
|
+
label = _ref.label;
|
|
14
|
+
return /*#__PURE__*/_react["default"].createElement(_LoadingStateStyle.LoadingStateContainer, {
|
|
15
|
+
colSpan: colSpan + 1
|
|
16
|
+
}, /*#__PURE__*/_react["default"].createElement(_LoadingStateStyle.SpinnerContainer, null, /*#__PURE__*/_react["default"].createElement(_Spinner.Spinner, {
|
|
17
|
+
height: 48,
|
|
18
|
+
width: 48,
|
|
19
|
+
fill: _colors.Blue.S99
|
|
20
|
+
}), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
|
|
21
|
+
variant: "subtitle1",
|
|
22
|
+
color: _colors.Neutral.B18
|
|
23
|
+
}, label)));
|
|
24
|
+
};
|
|
25
|
+
exports.LoadingState = LoadingState;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
exports.__esModule = true;
|
|
5
|
+
exports.SpinnerContainer = exports.LoadingStateContainer = void 0;
|
|
6
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
7
|
+
var _ = require("../../..");
|
|
8
|
+
var LoadingStateContainer = _styledComponents["default"].td.withConfig({
|
|
9
|
+
displayName: "LoadingStateStyle__LoadingStateContainer",
|
|
10
|
+
componentId: "sc-1pvfz22-0"
|
|
11
|
+
})(["height:480px;"]);
|
|
12
|
+
exports.LoadingStateContainer = LoadingStateContainer;
|
|
13
|
+
var SpinnerContainer = _styledComponents["default"].div.withConfig({
|
|
14
|
+
displayName: "LoadingStateStyle__SpinnerContainer",
|
|
15
|
+
componentId: "sc-1pvfz22-1"
|
|
16
|
+
})(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-direction:column;gap:16px;p{margin:0;}@media (max-width:", "){position:absolute;top:0;left:0;}"], _.Breakpoints.large);
|
|
17
|
+
exports.SpinnerContainer = SpinnerContainer;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './LoadingState';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
var _LoadingState = require("./LoadingState");
|
|
5
|
+
Object.keys(_LoadingState).forEach(function (key) {
|
|
6
|
+
if (key === "default" || key === "__esModule") return;
|
|
7
|
+
if (key in exports && exports[key] === _LoadingState[key]) return;
|
|
8
|
+
exports[key] = _LoadingState[key];
|
|
9
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
|
|
3
|
+
checked?: boolean;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
onChange: () => void;
|
|
6
|
+
value: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
exports.__esModule = true;
|
|
5
|
+
exports.Switch = void 0;
|
|
6
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
7
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _SwitchStyle = require("./SwitchStyle");
|
|
10
|
+
var _excluded = ["checked", "disabled", "onChange", "value"];
|
|
11
|
+
var Switch = /*#__PURE__*/_react["default"].forwardRef(function Switch(_ref, ref) {
|
|
12
|
+
var checked = _ref.checked,
|
|
13
|
+
disabled = _ref.disabled,
|
|
14
|
+
onChange = _ref.onChange,
|
|
15
|
+
value = _ref.value,
|
|
16
|
+
otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
|
|
17
|
+
return /*#__PURE__*/_react["default"].createElement(_SwitchStyle.LabelStyle, null, /*#__PURE__*/_react["default"].createElement(_SwitchStyle.InputStyle, (0, _extends2["default"])({
|
|
18
|
+
value: value
|
|
19
|
+
}, otherProps, {
|
|
20
|
+
disabled: disabled,
|
|
21
|
+
defaultChecked: checked,
|
|
22
|
+
type: "checkbox",
|
|
23
|
+
onChange: onChange,
|
|
24
|
+
ref: ref
|
|
25
|
+
})), /*#__PURE__*/_react["default"].createElement(_SwitchStyle.SwitchStyle, {
|
|
26
|
+
"data-disabled": disabled
|
|
27
|
+
}));
|
|
28
|
+
});
|
|
29
|
+
exports.Switch = Switch;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const SwitchStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const InputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
3
|
+
export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
exports.__esModule = true;
|
|
5
|
+
exports.SwitchStyle = exports.LabelStyle = exports.InputStyle = void 0;
|
|
6
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
7
|
+
var _ = require("..");
|
|
8
|
+
var _colors = require("../utilities/colors");
|
|
9
|
+
var SwitchStyle = _styledComponents["default"].div.withConfig({
|
|
10
|
+
displayName: "SwitchStyle",
|
|
11
|
+
componentId: "sc-7dlucf-0"
|
|
12
|
+
})(["position:relative;width:", ";height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";}border-radius:", ";padding:0;transition:300ms all;@media (max-width:", "){width:38px;height:22px;}&:before{transition:100ms all;content:'';position:absolute;width:16px;height:16px;border-radius:16px;top:50%;left:4px;background:", ";transform:translate(0,-50%);@media (max-width:", "){width:14px;height:14px;}}"], _.Spacing.space40, _.Spacing.space24, _colors.Neutral.B40, _colors.Neutral.B95, _.Spacing.space24, _.Breakpoints.large, _colors.Neutral.B100, _.Breakpoints.large);
|
|
13
|
+
exports.SwitchStyle = SwitchStyle;
|
|
14
|
+
var InputStyle = _styledComponents["default"].input.withConfig({
|
|
15
|
+
displayName: "SwitchStyle__InputStyle",
|
|
16
|
+
componentId: "sc-7dlucf-1"
|
|
17
|
+
})(["opacity:0;position:absolute;&:checked + ", "{background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{transform:translate(16px,-50%);}}"], SwitchStyle, _colors.Blue.S99, _colors.Neutral.B95);
|
|
18
|
+
exports.InputStyle = InputStyle;
|
|
19
|
+
var LabelStyle = _styledComponents["default"].label.withConfig({
|
|
20
|
+
displayName: "SwitchStyle__LabelStyle",
|
|
21
|
+
componentId: "sc-7dlucf-2"
|
|
22
|
+
})(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
|
|
23
|
+
exports.LabelStyle = LabelStyle;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Switch';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
var _Switch = require("./Switch");
|
|
5
|
+
Object.keys(_Switch).forEach(function (key) {
|
|
6
|
+
if (key === "default" || key === "__esModule") return;
|
|
7
|
+
if (key in exports && exports[key] === _Switch[key]) return;
|
|
8
|
+
exports[key] = _Switch[key];
|
|
9
|
+
});
|
package/lib/@next/index.d.ts
CHANGED
|
@@ -29,3 +29,4 @@ export { TextInput, TextInputProps } from './TextInput';
|
|
|
29
29
|
export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
|
|
30
30
|
export { Typography, TypographyProps } from './Typography';
|
|
31
31
|
export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
|
|
32
|
+
export { Switch } from './Switch';
|
package/lib/@next/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
|
-
exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
|
|
4
|
+
exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
|
|
5
5
|
var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
|
|
6
6
|
exports.BorderRadius = BorderRadius;
|
|
7
7
|
var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
|
|
@@ -102,5 +102,7 @@ exports.TooltipProps = _Tooltip.TooltipProps;
|
|
|
102
102
|
var _Typography = require("./Typography");
|
|
103
103
|
exports.Typography = _Typography.Typography;
|
|
104
104
|
exports.TypographyProps = _Typography.TypographyProps;
|
|
105
|
+
var _Switch = require("./Switch");
|
|
106
|
+
exports.Switch = _Switch.Switch;
|
|
105
107
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
106
108
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|