@invoicebox/ui 0.1.0-alpha.165 → 0.1.0-alpha.167
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/dist/components/form/CurrencyInput/CoreCurrencyInput/index.d.ts +10 -0
- package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.js +63 -0
- package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.stories.d.ts +5 -0
- package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.stories.js +42 -0
- package/dist/components/form/CurrencyInput/CoreCurrencyInput/styles.d.ts +11 -0
- package/dist/components/form/CurrencyInput/CoreCurrencyInput/styles.js +10 -0
- package/dist/components/form/CurrencyInput/CurrencyInputNumber/index.d.ts +6 -0
- package/dist/components/form/CurrencyInput/CurrencyInputNumber/index.js +23 -0
- package/dist/components/form/CurrencyInput/CurrencyInputNumber/index.stories.d.ts +5 -0
- package/dist/components/form/CurrencyInput/CurrencyInputNumber/index.stories.js +55 -0
- package/dist/components/form/CurrencyInput/CurrencyInputString/index.d.ts +6 -0
- package/dist/components/form/CurrencyInput/CurrencyInputString/index.js +23 -0
- package/dist/components/form/CurrencyInput/CurrencyInputString/index.stories.d.ts +5 -0
- package/dist/components/form/CurrencyInput/CurrencyInputString/index.stories.js +41 -0
- package/dist/components/form/CurrencyInput/README.md +24 -0
- package/dist/components/form/PureInput/styles.d.ts +13 -21
- package/dist/components/form/PureInput/styles.js +35 -32
- package/dist/components/form/TextInput/index.js +4 -2
- package/dist/components/form/Toggle/index.d.ts +8 -0
- package/dist/components/form/Toggle/index.js +43 -0
- package/dist/components/form/Toggle/index.stories.d.ts +5 -0
- package/dist/components/form/Toggle/index.stories.js +41 -0
- package/dist/components/form/Toggle/palette.d.ts +8 -0
- package/dist/components/form/Toggle/palette.js +16 -0
- package/dist/components/form/Toggle/styles.d.ts +20 -0
- package/dist/components/form/Toggle/styles.js +64 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +7 -0
- package/dist/palette/context.d.ts +2 -0
- package/dist/palette/context.js +3 -1
- package/dist/palette/provider.js +3 -1
- package/dist/palette/usePalette.d.ts +1 -0
- package/package.json +2 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { TProps as TInputLabelProps } from '../../InputLabel';
|
|
3
|
+
import { TSizes } from '../../constants';
|
|
4
|
+
import { CurrencyInputProps } from 'react-currency-input-field';
|
|
5
|
+
export type TProps = Pick<CurrencyInputProps, 'allowNegativeValue' | 'onValueChange' | 'value' | 'defaultValue' | 'allowDecimals'> & Pick<TInputLabelProps, 'label' | 'disabled'> & {
|
|
6
|
+
hasError?: boolean;
|
|
7
|
+
} & {
|
|
8
|
+
size?: TSizes;
|
|
9
|
+
};
|
|
10
|
+
export declare const CoreCurrencyInput: FC<TProps>;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CoreCurrencyInput = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _InputLabel = require("../../InputLabel");
|
|
9
|
+
var _useInputFocus2 = require("../../../../hooks/useInputFocus");
|
|
10
|
+
var _styles = require("./styles");
|
|
11
|
+
var _constants = require("../../constants");
|
|
12
|
+
var _palette = require("../../../../palette");
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
|
+
var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_ref) {
|
|
15
|
+
var label = _ref.label,
|
|
16
|
+
_ref$size = _ref.size,
|
|
17
|
+
size = _ref$size === void 0 ? 'L' : _ref$size,
|
|
18
|
+
_ref$hasError = _ref.hasError,
|
|
19
|
+
hasError = _ref$hasError === void 0 ? false : _ref$hasError,
|
|
20
|
+
value = _ref.value,
|
|
21
|
+
_ref$allowNegativeVal = _ref.allowNegativeValue,
|
|
22
|
+
allowNegativeValue = _ref$allowNegativeVal === void 0 ? false : _ref$allowNegativeVal,
|
|
23
|
+
onValueChange = _ref.onValueChange,
|
|
24
|
+
defaultValue = _ref.defaultValue,
|
|
25
|
+
_ref$allowDecimals = _ref.allowDecimals,
|
|
26
|
+
allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
|
|
27
|
+
disabled = _ref.disabled;
|
|
28
|
+
var _useInputFocus = (0, _useInputFocus2.useInputFocus)(),
|
|
29
|
+
inFocus = _useInputFocus.inFocus,
|
|
30
|
+
handleFocus = _useInputFocus.handleFocus,
|
|
31
|
+
handleBlur = _useInputFocus.handleBlur;
|
|
32
|
+
var palette = (0, _palette.useComponentPalette)('pureInput');
|
|
33
|
+
var _SIZE_PADDING_MAP$siz = _constants.SIZE_PADDING_MAP[size],
|
|
34
|
+
paddingBottom = _SIZE_PADDING_MAP$siz.paddingBottom,
|
|
35
|
+
paddingTop = _SIZE_PADDING_MAP$siz.paddingTop;
|
|
36
|
+
return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
|
|
37
|
+
inFocus: inFocus,
|
|
38
|
+
label: label,
|
|
39
|
+
disabled: disabled
|
|
40
|
+
}, /*#__PURE__*/_react["default"].createElement(_styles.StyledCurrencyInputFromLibrary, {
|
|
41
|
+
$palette: palette,
|
|
42
|
+
$hasBorder: true,
|
|
43
|
+
$paddingLeft: 18,
|
|
44
|
+
$paddingRight: 18,
|
|
45
|
+
$paddingTop: paddingTop,
|
|
46
|
+
$paddingBottom: paddingBottom,
|
|
47
|
+
$hasError: hasError,
|
|
48
|
+
$inFocus: inFocus,
|
|
49
|
+
onBlur: handleBlur,
|
|
50
|
+
onFocus: handleFocus
|
|
51
|
+
// currency props
|
|
52
|
+
,
|
|
53
|
+
value: value,
|
|
54
|
+
allowNegativeValue: allowNegativeValue,
|
|
55
|
+
onValueChange: onValueChange,
|
|
56
|
+
defaultValue: defaultValue,
|
|
57
|
+
allowDecimals: allowDecimals,
|
|
58
|
+
decimalsLimit: 2,
|
|
59
|
+
decimalSeparator: ',',
|
|
60
|
+
groupSeparator: ' ',
|
|
61
|
+
disabled: disabled
|
|
62
|
+
}));
|
|
63
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = exports.Default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _index = require("./index");
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
12
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
13
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
14
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
16
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
17
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
18
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
19
|
+
var meta = {
|
|
20
|
+
title: 'form/CoreCurrencyInput',
|
|
21
|
+
component: _index.CoreCurrencyInput,
|
|
22
|
+
tags: ['autodocs']
|
|
23
|
+
};
|
|
24
|
+
var _default = exports["default"] = meta;
|
|
25
|
+
var Component = function Component(props) {
|
|
26
|
+
var _useState = (0, _react.useState)(),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
value = _useState2[0],
|
|
29
|
+
setValue = _useState2[1];
|
|
30
|
+
return /*#__PURE__*/_react["default"].createElement(_index.CoreCurrencyInput, _extends({}, props, {
|
|
31
|
+
value: value,
|
|
32
|
+
onValueChange: setValue
|
|
33
|
+
}));
|
|
34
|
+
};
|
|
35
|
+
var Default = exports.Default = {
|
|
36
|
+
args: {
|
|
37
|
+
label: 'Label',
|
|
38
|
+
size: 'L',
|
|
39
|
+
disabled: false
|
|
40
|
+
},
|
|
41
|
+
render: Component
|
|
42
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StyledCurrencyInputFromLibrary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<any, {
|
|
3
|
+
$paddingLeft: number;
|
|
4
|
+
$paddingRight: number;
|
|
5
|
+
$paddingTop: number;
|
|
6
|
+
$paddingBottom: number;
|
|
7
|
+
$hasError: boolean;
|
|
8
|
+
$inFocus: boolean;
|
|
9
|
+
$hasBorder: boolean;
|
|
10
|
+
$palette: import("../../PureInput/palette").TPureInputPalette;
|
|
11
|
+
}>> & string & ({} | Omit<import("react").ComponentClass<any, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<any>, keyof import("react").Component<any, {}, any>>);
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledCurrencyInputFromLibrary = void 0;
|
|
7
|
+
var _reactCurrencyInputField = _interopRequireDefault(require("react-currency-input-field"));
|
|
8
|
+
var _styles = require("../../PureInput/styles");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var StyledCurrencyInputFromLibrary = exports.StyledCurrencyInputFromLibrary = (0, _styles.getPureInputStyled)(_reactCurrencyInputField["default"]);
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { TProps as TCoreCurrencyInputProps } from '../CoreCurrencyInput';
|
|
3
|
+
export type TProps = Omit<TCoreCurrencyInputProps, 'value' | 'onValueChange'> & {
|
|
4
|
+
onChange: (value?: number) => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const CurrencyInputNumber: FC<TProps>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CurrencyInputNumber = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _CoreCurrencyInput = require("../CoreCurrencyInput");
|
|
9
|
+
var _excluded = ["onChange"];
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
12
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
13
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
14
|
+
var CurrencyInputNumber = exports.CurrencyInputNumber = function CurrencyInputNumber(_ref) {
|
|
15
|
+
var onChange = _ref.onChange,
|
|
16
|
+
other = _objectWithoutProperties(_ref, _excluded);
|
|
17
|
+
var handleValueChange = function handleValueChange(newValue, name, values) {
|
|
18
|
+
onChange((values === null || values === void 0 ? void 0 : values["float"]) || undefined);
|
|
19
|
+
};
|
|
20
|
+
return /*#__PURE__*/_react["default"].createElement(_CoreCurrencyInput.CoreCurrencyInput, _extends({
|
|
21
|
+
onValueChange: handleValueChange
|
|
22
|
+
}, other));
|
|
23
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = exports.Default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _index = require("./index");
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
12
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
13
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
14
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
16
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
17
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
18
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
19
|
+
var meta = {
|
|
20
|
+
title: 'form/CurrencyInputNumber',
|
|
21
|
+
component: _index.CurrencyInputNumber,
|
|
22
|
+
tags: ['autodocs']
|
|
23
|
+
};
|
|
24
|
+
var _default = exports["default"] = meta;
|
|
25
|
+
var Component = function Component(props) {
|
|
26
|
+
var _useState = (0, _react.useState)(11),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
value = _useState2[0],
|
|
29
|
+
setValue = _useState2[1];
|
|
30
|
+
var _useState3 = (0, _react.useState)(1),
|
|
31
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
32
|
+
key = _useState4[0],
|
|
33
|
+
setKey = _useState4[1];
|
|
34
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
|
|
35
|
+
type: 'button',
|
|
36
|
+
onClick: function onClick() {
|
|
37
|
+
setValue(11);
|
|
38
|
+
setKey(function (prevState) {
|
|
39
|
+
return prevState + 1;
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
}, "Reset input value"), /*#__PURE__*/_react["default"].createElement(_index.CurrencyInputNumber, _extends({
|
|
43
|
+
key: key
|
|
44
|
+
}, props, {
|
|
45
|
+
defaultValue: value,
|
|
46
|
+
onChange: setValue
|
|
47
|
+
})));
|
|
48
|
+
};
|
|
49
|
+
var Default = exports.Default = {
|
|
50
|
+
args: {
|
|
51
|
+
label: 'Label',
|
|
52
|
+
size: 'L'
|
|
53
|
+
},
|
|
54
|
+
render: Component
|
|
55
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { TProps as TCoreCurrencyInputProps } from '../CoreCurrencyInput';
|
|
3
|
+
export type TProps = Omit<TCoreCurrencyInputProps, 'defaultValue' | 'onValueChange'> & {
|
|
4
|
+
onChange: (value?: string) => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const CurrencyInputString: FC<TProps>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CurrencyInputString = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _CoreCurrencyInput = require("../CoreCurrencyInput");
|
|
9
|
+
var _excluded = ["onChange"];
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
12
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
13
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
14
|
+
var CurrencyInputString = exports.CurrencyInputString = function CurrencyInputString(_ref) {
|
|
15
|
+
var onChange = _ref.onChange,
|
|
16
|
+
other = _objectWithoutProperties(_ref, _excluded);
|
|
17
|
+
var handleValueChange = function handleValueChange(newValue) {
|
|
18
|
+
onChange(newValue);
|
|
19
|
+
};
|
|
20
|
+
return /*#__PURE__*/_react["default"].createElement(_CoreCurrencyInput.CoreCurrencyInput, _extends({
|
|
21
|
+
onValueChange: handleValueChange
|
|
22
|
+
}, other));
|
|
23
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = exports.Default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _index = require("./index");
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
12
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
13
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
14
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
16
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
17
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
18
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
19
|
+
var meta = {
|
|
20
|
+
title: 'form/CurrencyInputString',
|
|
21
|
+
component: _index.CurrencyInputString,
|
|
22
|
+
tags: ['autodocs']
|
|
23
|
+
};
|
|
24
|
+
var _default = exports["default"] = meta;
|
|
25
|
+
var Component = function Component(props) {
|
|
26
|
+
var _useState = (0, _react.useState)('22,33'),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
value = _useState2[0],
|
|
29
|
+
setValue = _useState2[1];
|
|
30
|
+
return /*#__PURE__*/_react["default"].createElement(_index.CurrencyInputString, _extends({}, props, {
|
|
31
|
+
value: value,
|
|
32
|
+
onChange: setValue
|
|
33
|
+
}));
|
|
34
|
+
};
|
|
35
|
+
var Default = exports.Default = {
|
|
36
|
+
args: {
|
|
37
|
+
label: 'Label',
|
|
38
|
+
size: 'L'
|
|
39
|
+
},
|
|
40
|
+
render: Component
|
|
41
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# Компоненты для ввода валюты
|
|
2
|
+
|
|
3
|
+
## CoreCurrencyInput
|
|
4
|
+
|
|
5
|
+
Служебный компонент, необходим для реализации иных компонентов. Недопустимо его прямое использование в компонентах вне текущей директории.
|
|
6
|
+
|
|
7
|
+
## CurrencyInputNumber
|
|
8
|
+
|
|
9
|
+
Компонент реализует неконтролируемый инпут. Возвращает в onChange число.
|
|
10
|
+
|
|
11
|
+
## CurrencyInputString
|
|
12
|
+
|
|
13
|
+
Компонент реализует контролируемый инпут. Возвращает в onChange строку.
|
|
14
|
+
|
|
15
|
+
## Причины разной реализации инпута валюты
|
|
16
|
+
|
|
17
|
+
Мы не можем сделать инпут CurrencyInputNumber контролируемым т.к. нам нужно сохранять разделения разрядов и делитель целой и дробной части - это хранится
|
|
18
|
+
в строке. И вы будем вынуждены каждый раз в сабмите конвертировать число в строку.
|
|
19
|
+
|
|
20
|
+
CurrencyInputNumber необходим для типовых сценариев, когда мы хотим что-то ввести в инпут и на выходе (в сабмите) получать число.
|
|
21
|
+
Обратная стороны заключается в том, что мы не можем влияя на форму, менять значение инпута т.к. инпут неконтролируемый.
|
|
22
|
+
Для влияния на значение придётся обновить defaultValue и вызвать перерендер.
|
|
23
|
+
|
|
24
|
+
CurrencyInputString необходим для сценариев когда мы хотим влияя на форму изменять значение инпута без сложностей. Недостатком является строка на выходе (в сабмите).
|
|
@@ -1,18 +1,6 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { TPureInputPalette } from './palette';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
} & {
|
|
6
|
-
element: "input";
|
|
7
|
-
} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
|
|
8
|
-
ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
|
|
9
|
-
}) | (Omit<{
|
|
10
|
-
variant: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints";
|
|
11
|
-
} & {
|
|
12
|
-
element: "textarea";
|
|
13
|
-
} & Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "onFocus" | "onBlur" | "onChange"> & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
|
|
14
|
-
ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
|
|
15
|
-
}), {
|
|
2
|
+
import { ElementType } from 'react';
|
|
3
|
+
export declare const getPureInputStyled: (component: ElementType) => import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<any, {
|
|
16
4
|
$paddingLeft: number;
|
|
17
5
|
$paddingRight: number;
|
|
18
6
|
$paddingTop: number;
|
|
@@ -21,10 +9,14 @@ export declare const Wrapper: import("styled-components/dist/types").IStyledComp
|
|
|
21
9
|
$inFocus: boolean;
|
|
22
10
|
$hasBorder: boolean;
|
|
23
11
|
$palette: TPureInputPalette;
|
|
24
|
-
}>> & string & Omit<import("react").
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
12
|
+
}>> & string & ({} | Omit<import("react").ComponentClass<any, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<any>, keyof import("react").Component<any, {}, any>>);
|
|
13
|
+
export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<any, {
|
|
14
|
+
$paddingLeft: number;
|
|
15
|
+
$paddingRight: number;
|
|
16
|
+
$paddingTop: number;
|
|
17
|
+
$paddingBottom: number;
|
|
18
|
+
$hasError: boolean;
|
|
19
|
+
$inFocus: boolean;
|
|
20
|
+
$hasBorder: boolean;
|
|
21
|
+
$palette: TPureInputPalette;
|
|
22
|
+
}>> & string & ({} | Omit<import("react").ComponentClass<any, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<any>, keyof import("react").Component<any, {}, any>>);
|
|
@@ -3,38 +3,41 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.Wrapper = void 0;
|
|
6
|
+
exports.getPureInputStyled = exports.Wrapper = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
var _Typography = require("../../common/Typography");
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
$
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
10
|
+
var getPureInputStyled = exports.getPureInputStyled = function getPureInputStyled(component) {
|
|
11
|
+
return (0, _styledComponents["default"])(component).withConfig({
|
|
12
|
+
displayName: "styles",
|
|
13
|
+
componentId: "sc-1g8ijo6-0"
|
|
14
|
+
})(["resize:none;color:", ";border-radius:10px;outline:none;width:100%;background-color:", ";transition:all 0.2s ease-in-out 0s;box-sizing:border-box;padding-right:", "px;padding-left:", "px;padding-top:", "px;padding-bottom:", "px;border:1px solid ", ";&::placeholder{color:", ";}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus{transition:background-color 0s 600000s,color 0s 600000s !important;}"], function (_ref) {
|
|
15
|
+
var $palette = _ref.$palette;
|
|
16
|
+
return $palette.text;
|
|
17
|
+
}, function (_ref2) {
|
|
18
|
+
var $palette = _ref2.$palette;
|
|
19
|
+
return $palette.bg;
|
|
20
|
+
}, function (_ref3) {
|
|
21
|
+
var $paddingRight = _ref3.$paddingRight;
|
|
22
|
+
return $paddingRight;
|
|
23
|
+
}, function (_ref4) {
|
|
24
|
+
var $paddingLeft = _ref4.$paddingLeft;
|
|
25
|
+
return $paddingLeft;
|
|
26
|
+
}, function (_ref5) {
|
|
27
|
+
var $paddingTop = _ref5.$paddingTop;
|
|
28
|
+
return $paddingTop;
|
|
29
|
+
}, function (_ref6) {
|
|
30
|
+
var $paddingBottom = _ref6.$paddingBottom;
|
|
31
|
+
return $paddingBottom;
|
|
32
|
+
}, function (_ref7) {
|
|
33
|
+
var $hasError = _ref7.$hasError,
|
|
34
|
+
$inFocus = _ref7.$inFocus,
|
|
35
|
+
$hasBorder = _ref7.$hasBorder,
|
|
36
|
+
$palette = _ref7.$palette;
|
|
37
|
+
return !$hasBorder ? 'transparent' : $hasError ? $palette.error : $inFocus ? $palette.borderFocus : $palette.border;
|
|
38
|
+
}, function (_ref8) {
|
|
39
|
+
var $palette = _ref8.$palette;
|
|
40
|
+
return $palette.placeholder;
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
var Wrapper = exports.Wrapper = getPureInputStyled(_Typography.InputWithTypography);
|
|
@@ -34,7 +34,8 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
|
|
|
34
34
|
isOnlyNumbers = _ref.isOnlyNumbers,
|
|
35
35
|
autoFocus = _ref.autoFocus,
|
|
36
36
|
_ref$element = _ref.element,
|
|
37
|
-
element = _ref$element === void 0 ? 'input' : _ref$element
|
|
37
|
+
element = _ref$element === void 0 ? 'input' : _ref$element,
|
|
38
|
+
rows = _ref.rows;
|
|
38
39
|
var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
|
|
39
40
|
onFocus: onFocus,
|
|
40
41
|
onBlur: onBlur
|
|
@@ -63,6 +64,7 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
|
|
|
63
64
|
type: type,
|
|
64
65
|
isOnlyNumbers: isOnlyNumbers,
|
|
65
66
|
autoFocus: autoFocus,
|
|
66
|
-
element: element
|
|
67
|
+
element: element,
|
|
68
|
+
rows: rows
|
|
67
69
|
}, _constants.SIZE_PADDING_MAP[size])), children && /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children)));
|
|
68
70
|
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { FC, InputHTMLAttributes } from 'react';
|
|
2
|
+
import { TToggleSize } from './styles';
|
|
3
|
+
export type TProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
|
|
4
|
+
onChange: (value: boolean) => void;
|
|
5
|
+
label: string;
|
|
6
|
+
variant?: TToggleSize;
|
|
7
|
+
};
|
|
8
|
+
export declare const Toggle: FC<TProps>;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.Toggle = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _styles = _interopRequireWildcard(require("./styles"));
|
|
10
|
+
var S = _styles;
|
|
11
|
+
var _Typography = require("../../common/Typography");
|
|
12
|
+
var _palette = require("../../../palette");
|
|
13
|
+
var _excluded = ["checked", "variant", "label", "onChange"];
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
16
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
17
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
18
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
19
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
20
|
+
var Toggle = exports.Toggle = function Toggle(_ref) {
|
|
21
|
+
var checked = _ref.checked,
|
|
22
|
+
_ref$variant = _ref.variant,
|
|
23
|
+
variant = _ref$variant === void 0 ? 'small' : _ref$variant,
|
|
24
|
+
label = _ref.label,
|
|
25
|
+
onChange = _ref.onChange,
|
|
26
|
+
other = _objectWithoutProperties(_ref, _excluded);
|
|
27
|
+
var palette = (0, _palette.useComponentPalette)('toggle');
|
|
28
|
+
var labelVariant = _styles.INPUT_VARIANT_MAP[variant].labelVariant;
|
|
29
|
+
var handleChange = function handleChange(event) {
|
|
30
|
+
onChange(event.target.checked);
|
|
31
|
+
};
|
|
32
|
+
return /*#__PURE__*/_react["default"].createElement(S.Label, {
|
|
33
|
+
$color: palette.label
|
|
34
|
+
}, /*#__PURE__*/_react["default"].createElement(S.StyledInput, _extends({
|
|
35
|
+
$variant: variant,
|
|
36
|
+
$palette: palette,
|
|
37
|
+
checked: checked,
|
|
38
|
+
onChange: handleChange,
|
|
39
|
+
type: "checkbox"
|
|
40
|
+
}, other)), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
|
|
41
|
+
variant: labelVariant
|
|
42
|
+
}, label));
|
|
43
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = exports.Default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _index = require("./index");
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
12
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
13
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
14
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
16
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
17
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
18
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
19
|
+
var meta = {
|
|
20
|
+
title: 'form/Toggle',
|
|
21
|
+
component: _index.Toggle,
|
|
22
|
+
tags: ['autodocs']
|
|
23
|
+
};
|
|
24
|
+
var _default = exports["default"] = meta;
|
|
25
|
+
var Component = function Component(props) {
|
|
26
|
+
var _useState = (0, _react.useState)(false),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
checked = _useState2[0],
|
|
29
|
+
setChecked = _useState2[1];
|
|
30
|
+
return /*#__PURE__*/_react["default"].createElement(_index.Toggle, _extends({}, props, {
|
|
31
|
+
checked: checked,
|
|
32
|
+
onChange: setChecked
|
|
33
|
+
}));
|
|
34
|
+
};
|
|
35
|
+
var Default = exports.Default = {
|
|
36
|
+
args: {
|
|
37
|
+
label: 'Label',
|
|
38
|
+
variant: 'small'
|
|
39
|
+
},
|
|
40
|
+
render: Component
|
|
41
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TAbstractPalette } from '../../../palette';
|
|
2
|
+
export type TTogglePalette = {
|
|
3
|
+
circle: string;
|
|
4
|
+
defaultBg: string;
|
|
5
|
+
activeBg: string;
|
|
6
|
+
label: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const generateTogglePalette: (abstractPalette: TAbstractPalette) => TTogglePalette;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.generateTogglePalette = void 0;
|
|
7
|
+
var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
9
|
+
var generateTogglePalette = exports.generateTogglePalette = function generateTogglePalette(abstractPalette) {
|
|
10
|
+
return {
|
|
11
|
+
circle: abstractPalette.base,
|
|
12
|
+
defaultBg: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3),
|
|
13
|
+
activeBg: abstractPalette.secondary,
|
|
14
|
+
label: abstractPalette.primary
|
|
15
|
+
};
|
|
16
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { typography } from '../../common/Typography/typography';
|
|
3
|
+
import { TTogglePalette } from './palette';
|
|
4
|
+
export type TToggleSize = 'small' | 'medium';
|
|
5
|
+
export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
|
|
6
|
+
$color: string;
|
|
7
|
+
}>> & string;
|
|
8
|
+
export declare const INPUT_VARIANT_MAP: Record<TToggleSize, {
|
|
9
|
+
width: number;
|
|
10
|
+
height: number;
|
|
11
|
+
circleSize: number;
|
|
12
|
+
labelVariant: keyof typeof typography;
|
|
13
|
+
leftChecked: number;
|
|
14
|
+
left: number;
|
|
15
|
+
}>;
|
|
16
|
+
export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
|
|
17
|
+
$palette: TTogglePalette;
|
|
18
|
+
$variant: TToggleSize;
|
|
19
|
+
checked?: boolean | undefined;
|
|
20
|
+
}>> & string;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledInput = exports.Label = exports.INPUT_VARIANT_MAP = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
9
|
+
var Label = exports.Label = _styledComponents["default"].label.withConfig({
|
|
10
|
+
displayName: "styles__Label",
|
|
11
|
+
componentId: "sc-1pe8ina-0"
|
|
12
|
+
})(["display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-sizing:border-box;color:", ";"], function (_ref) {
|
|
13
|
+
var $color = _ref.$color;
|
|
14
|
+
return $color;
|
|
15
|
+
});
|
|
16
|
+
var INPUT_VARIANT_MAP = exports.INPUT_VARIANT_MAP = {
|
|
17
|
+
small: {
|
|
18
|
+
width: 27,
|
|
19
|
+
height: 16,
|
|
20
|
+
circleSize: 14,
|
|
21
|
+
labelVariant: 'captionRegular',
|
|
22
|
+
leftChecked: 12,
|
|
23
|
+
left: 1
|
|
24
|
+
},
|
|
25
|
+
medium: {
|
|
26
|
+
width: 33,
|
|
27
|
+
height: 20,
|
|
28
|
+
circleSize: 16,
|
|
29
|
+
labelVariant: 'headline5',
|
|
30
|
+
leftChecked: 15.5,
|
|
31
|
+
left: 1.5
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
var StyledInput = exports.StyledInput = _styledComponents["default"].input.withConfig({
|
|
35
|
+
displayName: "styles__StyledInput",
|
|
36
|
+
componentId: "sc-1pe8ina-1"
|
|
37
|
+
})(["position:relative;width:", "px;height:", "px;cursor:pointer;-webkit-appearance:none;box-shadow:none;border:none;background:", ";border-radius:30px;&:after{content:'';display:block;position:absolute;left:", "px;top:50%;transform:translateY(-50%);width:", "px;height:", "px;border-radius:50%;background-color:", ";transition:all 0.2s ease-in-out 0s;}&:checked::after{left:", "px;}&:checked{background:", ";}&:disabled{cursor:not-allowed;}"], function (_ref2) {
|
|
38
|
+
var $variant = _ref2.$variant;
|
|
39
|
+
return INPUT_VARIANT_MAP[$variant].width;
|
|
40
|
+
}, function (_ref3) {
|
|
41
|
+
var $variant = _ref3.$variant;
|
|
42
|
+
return INPUT_VARIANT_MAP[$variant].height;
|
|
43
|
+
}, function (_ref4) {
|
|
44
|
+
var $palette = _ref4.$palette;
|
|
45
|
+
return $palette.defaultBg;
|
|
46
|
+
}, function (_ref5) {
|
|
47
|
+
var $variant = _ref5.$variant;
|
|
48
|
+
return INPUT_VARIANT_MAP[$variant].left;
|
|
49
|
+
}, function (_ref6) {
|
|
50
|
+
var $variant = _ref6.$variant;
|
|
51
|
+
return INPUT_VARIANT_MAP[$variant].circleSize;
|
|
52
|
+
}, function (_ref7) {
|
|
53
|
+
var $variant = _ref7.$variant;
|
|
54
|
+
return INPUT_VARIANT_MAP[$variant].circleSize;
|
|
55
|
+
}, function (_ref8) {
|
|
56
|
+
var $palette = _ref8.$palette;
|
|
57
|
+
return $palette.circle;
|
|
58
|
+
}, function (_ref9) {
|
|
59
|
+
var $variant = _ref9.$variant;
|
|
60
|
+
return INPUT_VARIANT_MAP[$variant].leftChecked;
|
|
61
|
+
}, function (_ref10) {
|
|
62
|
+
var $palette = _ref10.$palette;
|
|
63
|
+
return $palette.activeBg;
|
|
64
|
+
});
|
package/dist/index.d.ts
CHANGED
|
@@ -19,6 +19,8 @@ export type { TProps as TEntityAutocompleteOptionsDrawerProps } from './componen
|
|
|
19
19
|
export { Scrollbar } from './components/common/Scrollbar';
|
|
20
20
|
export { Select } from './components/form/Select';
|
|
21
21
|
export type { TProps as TSelectProps } from './components/form/Select';
|
|
22
|
+
export { Toggle } from './components/form/Toggle';
|
|
23
|
+
export type { TProps as TToggleProps } from './components/form/Toggle';
|
|
22
24
|
export { Calendar } from './components/common/Calendar';
|
|
23
25
|
export type { TProps as TCalendarProps } from './components/common/Calendar';
|
|
24
26
|
export { DateInput } from './components/form/DateInput';
|
|
@@ -37,6 +39,10 @@ export { CountrySelect } from './components/form/CountrySelect';
|
|
|
37
39
|
export type { TProps as TCountrySelectProps } from './components/form/CountrySelect';
|
|
38
40
|
export { PhoneInput } from './components/form/PhoneInput';
|
|
39
41
|
export type { TProps as TPhoneInputProps } from './components/form/PhoneInput';
|
|
42
|
+
export type { CurrencyInputNumber } from './components/form/CurrencyInput/CurrencyInputNumber';
|
|
43
|
+
export type { TProps as TCurrencyInputNumberProps } from './components/form/CurrencyInput/CurrencyInputNumber';
|
|
44
|
+
export type { CurrencyInputString } from './components/form/CurrencyInput/CurrencyInputString';
|
|
45
|
+
export type { TProps as TCurrencyInputStringProps } from './components/form/CurrencyInput/CurrencyInputString';
|
|
40
46
|
export { phoneLogic } from './components/form/PhoneInput/externalPhoneLogic';
|
|
41
47
|
export { BgCard } from './components/common/BgCard';
|
|
42
48
|
export { ToastContainer, toast } from './components/common/Toast';
|
package/dist/index.js
CHANGED
|
@@ -201,6 +201,12 @@ Object.defineProperty(exports, "ToastContainer", {
|
|
|
201
201
|
return _Toast.ToastContainer;
|
|
202
202
|
}
|
|
203
203
|
});
|
|
204
|
+
Object.defineProperty(exports, "Toggle", {
|
|
205
|
+
enumerable: true,
|
|
206
|
+
get: function get() {
|
|
207
|
+
return _Toggle.Toggle;
|
|
208
|
+
}
|
|
209
|
+
});
|
|
204
210
|
Object.defineProperty(exports, "Typography", {
|
|
205
211
|
enumerable: true,
|
|
206
212
|
get: function get() {
|
|
@@ -312,6 +318,7 @@ var _Drawer = require("./components/common/Drawer");
|
|
|
312
318
|
var _EntityAutocompleteOptionsDrawer = require("./components/common/EntityAutocompleteOptionsDrawer");
|
|
313
319
|
var _Scrollbar = require("./components/common/Scrollbar");
|
|
314
320
|
var _Select = require("./components/form/Select");
|
|
321
|
+
var _Toggle = require("./components/form/Toggle");
|
|
315
322
|
var _Calendar = require("./components/common/Calendar");
|
|
316
323
|
var _DateInput = require("./components/form/DateInput");
|
|
317
324
|
var _WarningIcon = require("./components/common/WarningIcon");
|
|
@@ -23,6 +23,7 @@ import { TDrawerPalette } from '../components/common/Drawer/palette';
|
|
|
23
23
|
import { TEntityAutocompleteOptionsDrawerPalette } from '../components/common/EntityAutocompleteOptionsDrawer/palette';
|
|
24
24
|
import { TCodeInputPalette } from '../components/form/CodeInput/palette';
|
|
25
25
|
import { TResetButtonPalette } from '../components/form/ResetButton/palette';
|
|
26
|
+
import { TTogglePalette } from '../components/form/Toggle/palette';
|
|
26
27
|
type TContext = {
|
|
27
28
|
skeleton: TSkeletonPalette;
|
|
28
29
|
invoiceboxSpinner: TInvoiceboxSpinnerPalette;
|
|
@@ -48,6 +49,7 @@ type TContext = {
|
|
|
48
49
|
entityAutocompleteOptionsDrawer: TEntityAutocompleteOptionsDrawerPalette;
|
|
49
50
|
codeInput: TCodeInputPalette;
|
|
50
51
|
resetButton: TResetButtonPalette;
|
|
52
|
+
toggle: TTogglePalette;
|
|
51
53
|
};
|
|
52
54
|
export declare const PaletteContext: import("react").Context<TContext>;
|
|
53
55
|
export {};
|
package/dist/palette/context.js
CHANGED
|
@@ -30,6 +30,7 @@ var _palette21 = require("../components/common/Drawer/palette");
|
|
|
30
30
|
var _palette22 = require("../components/common/EntityAutocompleteOptionsDrawer/palette");
|
|
31
31
|
var _palette23 = require("../components/form/CodeInput/palette");
|
|
32
32
|
var _palette24 = require("../components/form/ResetButton/palette");
|
|
33
|
+
var _palette25 = require("../components/form/Toggle/palette");
|
|
33
34
|
var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
|
|
34
35
|
skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
|
|
35
36
|
invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
|
|
@@ -54,5 +55,6 @@ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createCont
|
|
|
54
55
|
drawer: (0, _palette21.generateDrawerPalette)(_constants.defaultAbstractPalette),
|
|
55
56
|
entityAutocompleteOptionsDrawer: (0, _palette22.generateEntityAutocompleteOptionsDrawerPalette)(_constants.defaultAbstractPalette),
|
|
56
57
|
codeInput: (0, _palette23.generateCodeInputPalette)(_constants.defaultAbstractPalette),
|
|
57
|
-
resetButton: (0, _palette24.generateResetButtonPalette)(_constants.defaultAbstractPalette)
|
|
58
|
+
resetButton: (0, _palette24.generateResetButtonPalette)(_constants.defaultAbstractPalette),
|
|
59
|
+
toggle: (0, _palette25.generateTogglePalette)(_constants.defaultAbstractPalette)
|
|
58
60
|
});
|
package/dist/palette/provider.js
CHANGED
|
@@ -31,6 +31,7 @@ var _palette21 = require("../components/common/Drawer/palette");
|
|
|
31
31
|
var _palette22 = require("../components/common/EntityAutocompleteOptionsDrawer/palette");
|
|
32
32
|
var _palette23 = require("../components/form/CodeInput/palette");
|
|
33
33
|
var _palette24 = require("../components/form/ResetButton/palette");
|
|
34
|
+
var _palette25 = require("../components/form/Toggle/palette");
|
|
34
35
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
35
36
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
36
37
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
@@ -74,7 +75,8 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
|
|
|
74
75
|
drawer: (0, _palette21.generateDrawerPalette)(mergedAbstractPalette),
|
|
75
76
|
entityAutocompleteOptionsDrawer: (0, _palette22.generateEntityAutocompleteOptionsDrawerPalette)(mergedAbstractPalette),
|
|
76
77
|
codeInput: (0, _palette23.generateCodeInputPalette)(mergedAbstractPalette),
|
|
77
|
-
resetButton: (0, _palette24.generateResetButtonPalette)(mergedAbstractPalette)
|
|
78
|
+
resetButton: (0, _palette24.generateResetButtonPalette)(mergedAbstractPalette),
|
|
79
|
+
toggle: (0, _palette25.generateTogglePalette)(mergedAbstractPalette)
|
|
78
80
|
};
|
|
79
81
|
}, [mergedSkeletonPalette, mergedAbstractPalette]);
|
|
80
82
|
return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {
|
|
@@ -23,4 +23,5 @@ export declare const usePalette: () => {
|
|
|
23
23
|
entityAutocompleteOptionsDrawer: import("../components/common/EntityAutocompleteOptionsDrawer/palette").TEntityAutocompleteOptionsDrawerPalette;
|
|
24
24
|
codeInput: import("../components/form/CodeInput/palette").TCodeInputPalette;
|
|
25
25
|
resetButton: import("../components/form/ResetButton/palette").TResetButtonPalette;
|
|
26
|
+
toggle: import("../components/form/Toggle/palette").TTogglePalette;
|
|
26
27
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@invoicebox/ui",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.167",
|
|
4
4
|
"description": "Invoicebox UI",
|
|
5
5
|
"license": "Apache License 2.0",
|
|
6
6
|
"scripts": {
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
"object.fromentries": "^2.0.8",
|
|
57
57
|
"qrcode.react": "^3.1.0",
|
|
58
58
|
"react-calendar": "^4.8.0",
|
|
59
|
+
"react-currency-input-field": "^3.10.0",
|
|
59
60
|
"react-responsive": "^9.0.2",
|
|
60
61
|
"react-scrollbars-custom": "^4.1.1",
|
|
61
62
|
"react-spring-bottom-sheet": "^3.4.1",
|