@xaypay/tui 0.0.8 → 0.0.11

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.
Files changed (7) hide show
  1. package/dist/index.es.js +25 -93
  2. package/dist/index.js +24 -94
  3. package/package.json +1 -1
  4. package/src/components/stepper/index.js +45 -0
  5. package/src/components/stepper/stepper.module.css +48 -0
  6. package/src/components/stepper/stepper.stories.js +17 -0
  7. package/src/index.js +2 -1
package/dist/index.es.js CHANGED
@@ -883,105 +883,37 @@ Captcha.defaultProps = {
883
883
  onclick: undefined
884
884
  };
885
885
 
886
- var css_248z = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:capitalize}.select-module_select-content__GCMDX{display:flex;flex-direction:column}.select-module_select-content-top__Aw-fB{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);max-height:0;max-width:400px;overflow:hidden;position:relative;top:6px}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}";
887
- var styles = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
886
+ var css_248z = ".stepper-module_bigRing__5GBm0{border:1px solid gray;border-radius:50%;cursor:pointer;height:30px;margin:10px;position:relative;width:30px}.stepper-module_smallRing__u-5a8{background-color:gray;border-radius:50%;color:#fff;font-size:12px;height:50%;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:50%}.stepper-module_activeRing__Lzvh1{border:1px solid blue;border-radius:50%;cursor:pointer;height:30px;margin:10px;position:relative;width:30px}.stepper-module_smallActiveRing__im-XG{background-color:blue;border-radius:50%;color:#fff;font-size:12px;height:50%;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:50%}";
887
+ var styles = {"bigRing":"stepper-module_bigRing__5GBm0","smallRing":"stepper-module_smallRing__u-5a8","activeRing":"stepper-module_activeRing__Lzvh1","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
888
888
  styleInject(css_248z);
889
889
 
890
- const SelectTheme = {
891
- DEFAULT: 'select-default',
892
- PRIMARY: 'select-primary',
893
- SUCCESS: 'select-success',
894
- INFO: 'select-info',
895
- WARNING: 'select-warning',
896
- DANGER: 'select-danger',
897
- LINK: 'select-link'
898
- };
899
- const SelectSize = {
900
- SMALL: 'small',
901
- MEDIUM: 'medium',
902
- LARGE: 'large'
903
- };
904
- const Select = ({
905
- theme,
906
- size,
890
+ const Stepper = ({
907
891
  className,
908
- disabled,
909
- label,
910
- jsonData,
911
- eMessage,
912
- required,
913
- defaultOption,
914
892
  onChange,
915
- selected
893
+ stepLength,
894
+ activeSteps
916
895
  }) => {
917
- const options = jsonData.length ? JSON.parse(jsonData) : [];
918
- let [opened, setOpened] = useState(false);
919
- let [newSelected, setNewSelected] = useState(selected);
920
- classnames(styles[theme], styles[size], {
921
- [styles.disabled]: disabled,
922
- [styles.required]: required
923
- }, className);
924
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
925
- className: styles['select-title']
926
- }, label) : "", /*#__PURE__*/React__default.createElement("div", {
927
- className: styles['select-wrap']
928
- }, /*#__PURE__*/React__default.createElement("div", {
929
- className: styles['select-content'],
930
- id: styles.selector
931
- }, /*#__PURE__*/React__default.createElement("div", {
932
- className: styles['select-content-top'],
933
- onClick: () => {
934
- setOpened(!opened);
935
- }
936
- }, /*#__PURE__*/React__default.createElement("div", {
937
- className: styles['select-content-top-text']
938
- }, newSelected?.name || defaultOption), /*#__PURE__*/React__default.createElement("div", {
939
- className: styles['select-content-top-icon']
940
- }, /*#__PURE__*/React__default.createElement(Icon, {
941
- className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
942
- }))), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
943
- className: styles['select-content-bottom']
944
- }, /*#__PURE__*/React__default.createElement("div", {
945
- className: styles['select-content-bottom-inner']
946
- }, /*#__PURE__*/React__default.createElement("div", {
947
- className: styles['select-content-bottom-row'],
948
- onClick: () => {
949
- if (!required && !selected) {
950
- setNewSelected(defaultOption);
951
- onChange(defaultOption);
952
- setOpened(!opened);
953
- }
896
+ classnames(className);
897
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (() => {
898
+ let steppers = [];
899
+
900
+ for (let step = 1; step <= stepLength; step++) {
901
+ steppers.push( /*#__PURE__*/React__default.createElement("div", {
902
+ className: classnames(`${step <= activeSteps ? styles.activeRing : styles.bigRing}`),
903
+ key: step
904
+ }, /*#__PURE__*/React__default.createElement("div", {
905
+ className: classnames(`${step <= activeSteps ? styles.smallActiveRing : styles.smallRing}`)
906
+ }, step <= activeSteps ? step : "")));
954
907
  }
955
- }, defaultOption), options?.map((option, i) => {
956
- return /*#__PURE__*/React__default.createElement("div", {
957
- className: styles['select-content-bottom-row'],
958
- disabled: true,
959
- onClick: () => {
960
- setNewSelected(option);
961
- onChange(option);
962
- setOpened(!opened);
963
- },
964
- defaultValue: option.id
965
- }, option.name);
966
- }))) : null)), eMessage ? /*#__PURE__*/React__default.createElement("span", {
967
- className: styles.eMessage
968
- }, eMessage) : null);
969
- };
970
- Select.propTypes = {
971
- theme: PropTypes.oneOf(Object.values(SelectTheme)),
972
- size: PropTypes.oneOf(Object.values(SelectSize)),
973
- label: PropTypes.string,
974
- eMessage: PropTypes.string,
975
- defaultOption: PropTypes.string,
976
- onChange: PropTypes.func,
977
- required: PropTypes.bool,
978
- disabled: PropTypes.bool,
979
- className: PropTypes.string,
980
- selected: PropTypes.object,
981
- jsonData: PropTypes.string
908
+
909
+ return steppers;
910
+ })());
982
911
  };
983
- Select.defaultProps = {
984
- size: 'medium'
912
+ Stepper.propTypes = {
913
+ className: PropTypes.string,
914
+ onChange: PropTypes.func,
915
+ stepLength: PropTypes.number,
916
+ activeSteps: PropTypes.number
985
917
  };
986
918
 
987
- export { Autocomplate, Button, ButtonSize, ButtonTheme, ButtonType, Captcha, Checkbox, SvgHeartFilled as HeartFilled, SvgHeartOutline as HeartOutline, Input, InputSizes, InputTypes, SvgLikeFilled as LikeFilled, SvgLikeOutline as LikeOutline, Pagination, Radio, Select, SelectSize, SelectTheme, SvgStarFilled as StarFilled, SvgStarOutline as StarOutline, Typography, TypographyType };
919
+ export { Autocomplate, Button, ButtonSize, ButtonTheme, ButtonType, Captcha, Checkbox, SvgHeartFilled as HeartFilled, SvgHeartOutline as HeartOutline, Input, InputSizes, InputTypes, SvgLikeFilled as LikeFilled, SvgLikeOutline as LikeOutline, Pagination, Radio, SvgStarFilled as StarFilled, SvgStarOutline as StarOutline, Stepper, Typography, TypographyType };
package/dist/index.js CHANGED
@@ -912,105 +912,37 @@ Captcha.defaultProps = {
912
912
  onclick: undefined
913
913
  };
914
914
 
915
- var css_248z = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:capitalize}.select-module_select-content__GCMDX{display:flex;flex-direction:column}.select-module_select-content-top__Aw-fB{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);max-height:0;max-width:400px;overflow:hidden;position:relative;top:6px}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}";
916
- var styles = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
915
+ var css_248z = ".stepper-module_bigRing__5GBm0{border:1px solid gray;border-radius:50%;cursor:pointer;height:30px;margin:10px;position:relative;width:30px}.stepper-module_smallRing__u-5a8{background-color:gray;border-radius:50%;color:#fff;font-size:12px;height:50%;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:50%}.stepper-module_activeRing__Lzvh1{border:1px solid blue;border-radius:50%;cursor:pointer;height:30px;margin:10px;position:relative;width:30px}.stepper-module_smallActiveRing__im-XG{background-color:blue;border-radius:50%;color:#fff;font-size:12px;height:50%;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:50%}";
916
+ var styles = {"bigRing":"stepper-module_bigRing__5GBm0","smallRing":"stepper-module_smallRing__u-5a8","activeRing":"stepper-module_activeRing__Lzvh1","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
917
917
  styleInject(css_248z);
918
918
 
919
- const SelectTheme = {
920
- DEFAULT: 'select-default',
921
- PRIMARY: 'select-primary',
922
- SUCCESS: 'select-success',
923
- INFO: 'select-info',
924
- WARNING: 'select-warning',
925
- DANGER: 'select-danger',
926
- LINK: 'select-link'
927
- };
928
- const SelectSize = {
929
- SMALL: 'small',
930
- MEDIUM: 'medium',
931
- LARGE: 'large'
932
- };
933
- const Select = ({
934
- theme,
935
- size,
919
+ const Stepper = ({
936
920
  className,
937
- disabled,
938
- label,
939
- jsonData,
940
- eMessage,
941
- required,
942
- defaultOption,
943
921
  onChange,
944
- selected
922
+ stepLength,
923
+ activeSteps
945
924
  }) => {
946
- const options = jsonData.length ? JSON.parse(jsonData) : [];
947
- let [opened, setOpened] = React$1.useState(false);
948
- let [newSelected, setNewSelected] = React$1.useState(selected);
949
- classnames__default["default"](styles[theme], styles[size], {
950
- [styles.disabled]: disabled,
951
- [styles.required]: required
952
- }, className);
953
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
954
- className: styles['select-title']
955
- }, label) : "", /*#__PURE__*/React__default["default"].createElement("div", {
956
- className: styles['select-wrap']
957
- }, /*#__PURE__*/React__default["default"].createElement("div", {
958
- className: styles['select-content'],
959
- id: styles.selector
960
- }, /*#__PURE__*/React__default["default"].createElement("div", {
961
- className: styles['select-content-top'],
962
- onClick: () => {
963
- setOpened(!opened);
964
- }
965
- }, /*#__PURE__*/React__default["default"].createElement("div", {
966
- className: styles['select-content-top-text']
967
- }, newSelected?.name || defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
968
- className: styles['select-content-top-icon']
969
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
970
- className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
971
- }))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
972
- className: styles['select-content-bottom']
973
- }, /*#__PURE__*/React__default["default"].createElement("div", {
974
- className: styles['select-content-bottom-inner']
975
- }, /*#__PURE__*/React__default["default"].createElement("div", {
976
- className: styles['select-content-bottom-row'],
977
- onClick: () => {
978
- if (!required && !selected) {
979
- setNewSelected(defaultOption);
980
- onChange(defaultOption);
981
- setOpened(!opened);
982
- }
925
+ classnames__default["default"](className);
926
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (() => {
927
+ let steppers = [];
928
+
929
+ for (let step = 1; step <= stepLength; step++) {
930
+ steppers.push( /*#__PURE__*/React__default["default"].createElement("div", {
931
+ className: classnames__default["default"](`${step <= activeSteps ? styles.activeRing : styles.bigRing}`),
932
+ key: step
933
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
934
+ className: classnames__default["default"](`${step <= activeSteps ? styles.smallActiveRing : styles.smallRing}`)
935
+ }, step <= activeSteps ? step : "")));
983
936
  }
984
- }, defaultOption), options?.map((option, i) => {
985
- return /*#__PURE__*/React__default["default"].createElement("div", {
986
- className: styles['select-content-bottom-row'],
987
- disabled: true,
988
- onClick: () => {
989
- setNewSelected(option);
990
- onChange(option);
991
- setOpened(!opened);
992
- },
993
- defaultValue: option.id
994
- }, option.name);
995
- }))) : null)), eMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
996
- className: styles.eMessage
997
- }, eMessage) : null);
937
+
938
+ return steppers;
939
+ })());
998
940
  };
999
- Select.propTypes = {
1000
- theme: PropTypes__default["default"].oneOf(Object.values(SelectTheme)),
1001
- size: PropTypes__default["default"].oneOf(Object.values(SelectSize)),
1002
- label: PropTypes__default["default"].string,
1003
- eMessage: PropTypes__default["default"].string,
1004
- defaultOption: PropTypes__default["default"].string,
1005
- onChange: PropTypes__default["default"].func,
1006
- required: PropTypes__default["default"].bool,
1007
- disabled: PropTypes__default["default"].bool,
941
+ Stepper.propTypes = {
1008
942
  className: PropTypes__default["default"].string,
1009
- selected: PropTypes__default["default"].object,
1010
- jsonData: PropTypes__default["default"].string
1011
- };
1012
- Select.defaultProps = {
1013
- size: 'medium'
943
+ onChange: PropTypes__default["default"].func,
944
+ stepLength: PropTypes__default["default"].number,
945
+ activeSteps: PropTypes__default["default"].number
1014
946
  };
1015
947
 
1016
948
  exports.Autocomplate = Autocomplate;
@@ -1029,10 +961,8 @@ exports.LikeFilled = SvgLikeFilled;
1029
961
  exports.LikeOutline = SvgLikeOutline;
1030
962
  exports.Pagination = Pagination;
1031
963
  exports.Radio = Radio;
1032
- exports.Select = Select;
1033
- exports.SelectSize = SelectSize;
1034
- exports.SelectTheme = SelectTheme;
1035
964
  exports.StarFilled = SvgStarFilled;
1036
965
  exports.StarOutline = SvgStarOutline;
966
+ exports.Stepper = Stepper;
1037
967
  exports.Typography = Typography;
1038
968
  exports.TypographyType = TypographyType;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.8",
3
+ "version": "0.0.11",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/stepper/index.js ADDED
@@ -0,0 +1,45 @@
1
+ import React from "react";
2
+ import PropTypes from "prop-types";
3
+ import classNames from "classnames";
4
+ import styles from "./stepper.module.css";
5
+
6
+ export const Stepper = ({ className, onChange, stepLength, activeSteps }) => {
7
+ const classProps = classNames(className);
8
+ return (
9
+ <>
10
+ {(() => {
11
+ let steppers = [];
12
+ for (let step = 1; step <= stepLength; step++) {
13
+ steppers.push(
14
+ <div
15
+ className={classNames(
16
+ `${step <= activeSteps ? styles.activeRing : styles.bigRing}`
17
+ )}
18
+ key={step}
19
+ >
20
+ <div
21
+ className={classNames(
22
+ `${
23
+ step <= activeSteps
24
+ ? styles.smallActiveRing
25
+ : styles.smallRing
26
+ }`
27
+ )}
28
+ >
29
+ {step <= activeSteps ? step : ""}
30
+ </div>
31
+ </div>
32
+ );
33
+ }
34
+ return steppers;
35
+ })()}
36
+ </>
37
+ );
38
+ };
39
+
40
+ Stepper.propTypes = {
41
+ className: PropTypes.string,
42
+ onChange: PropTypes.func,
43
+ stepLength: PropTypes.number,
44
+ activeSteps: PropTypes.number,
45
+ };
package/src/components/stepper/stepper.module.css ADDED
@@ -0,0 +1,48 @@
1
+ .bigRing {
2
+ width: 30px;
3
+ height: 30px;
4
+ border: 1px solid gray;
5
+ border-radius: 50%;
6
+ position: relative;
7
+ margin: 10px;
8
+ cursor:pointer;
9
+ }
10
+
11
+ .smallRing {
12
+ position: absolute;
13
+ width: 50%;
14
+ height: 50%;
15
+ border-radius: 50%;
16
+ background-color: gray;
17
+ top: 50%;
18
+ left: 50%;
19
+ transform: translate(-50%, -50%);
20
+ font-size: 12px;
21
+ color: white;
22
+ text-align: center;
23
+ }
24
+
25
+
26
+ .activeRing {
27
+ width: 30px;
28
+ height: 30px;
29
+ border: 1px solid blue;
30
+ border-radius: 50%;
31
+ position: relative;
32
+ margin: 10px;
33
+ cursor:pointer;
34
+ }
35
+
36
+ .smallActiveRing {
37
+ position: absolute;
38
+ width: 50%;
39
+ height: 50%;
40
+ border-radius: 50%;
41
+ background-color: blue;
42
+ top: 50%;
43
+ left: 50%;
44
+ transform: translate(-50%, -50%);
45
+ font-size: 12px;
46
+ color: white;
47
+ text-align: center;
48
+ }
package/src/components/stepper/stepper.stories.js ADDED
@@ -0,0 +1,17 @@
1
+ import React from "react";
2
+ import { Stepper } from "./index";
3
+ export default {
4
+ component: Stepper,
5
+ title: "Components/Stepper",
6
+ };
7
+
8
+ const Template = ({ stepLength, activeSteps }) => {
9
+ return <Stepper stepLength={stepLength} activeSteps={activeSteps} />;
10
+ };
11
+
12
+ export const Default = Template.bind({});
13
+
14
+ Default.args = {
15
+ stepLength: 5,
16
+ activeSteps: 3,
17
+ };
package/src/index.js CHANGED
@@ -7,4 +7,5 @@ export * from './components/input';
7
7
  export * from './components/pagination';
8
8
  export * from './components/radio';
9
9
  export * from './components/captcha';
10
- export * from './components/select';
10
+ export * from './components/stepper';
11
+ // export * from './components/select';