diginet-core-ui 1.3.24

package/components/check-text/index.js

@@ -0,0 +1,157 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useEffect, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+import Typography from '../typography';
+const color = [`${theme.colors.info}`, `${theme.colors.success}`, `${theme.colors.warning}`, `${theme.colors.danger}`];
+const colorNum = {
+  option0: 0,
+  option1: 1,
+  option2: 2,
+  option3: 3
+};
+const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  disabled,
+  readOnly,
+  chosen,
+  onClick,
+  onChoose,
+  option
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const checkText = css`
+        display: inline-flex;
+        color: ${disabled ? theme.colors.disabled : theme.colors.border};
+        div:nth-of-type(1):hover {
+            color: ${color[0]};
+        }
+        div:nth-of-type(2):hover {
+            color: ${color[1]};
+        }
+        div:nth-of-type(3):hover {
+            color: ${color[2]};
+        }
+    `;
+  const checkTextItemText = css`
+        margin-left: 10px;
+    `;
+  const checkTextDivider = css`
+        margin: 2px 19px;
+        width: 2px;
+        height: 16px;
+        background: ${theme.colors.border};
+        border-radius: 1px;
+    `;
+
+  const onClickItem = (e, index) => {
+    const clickedItem = ref.current.querySelectorAll('div');
+    if (readOnly || clickedItem[index].style.color) return;
+    clickedItem.forEach((el, i) => {
+      if (i === index) {
+        el.style.color = color[index];
+      } else if (el.style.color) {
+        el.style.color = null;
+      }
+    });
+    e.selectedItem = {
+      value: e.target.textContent,
+      index
+    };
+    if (onClick) onClick(e);
+    if (onChoose) onChoose(e);
+  };
+
+  useEffect(() => {
+    ref.current.querySelectorAll('div').forEach((el, i) => {
+      if (i === chosen || el.textContent === chosen) {
+        el.style.color = color[isNaN(chosen) ? colorNum[chosen] : chosen];
+      } else if (el.style.color) {
+        el.style.color = null;
+      }
+    });
+  }, [chosen]);
+  const ItemName = option.map(index => jsx("span", {
+    css: checkTextItemText
+  }, index));
+  return jsx("div", {
+    css: checkText,
+    ref: ref
+  }, jsx(Typography, {
+    type: 'p2',
+    style: {
+      lineHeight: '20px',
+      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      cursor: `${readOnly ? 'default' : 'pointer'}`,
+      pointerEvents: `${disabled ? 'none' : 'auto'}`,
+      userSelect: 'none'
+    },
+    mapping: 'div',
+    onClick: e => onClickItem(e, 0)
+  }, ItemName[0]), jsx("span", {
+    css: checkTextDivider
+  }), jsx(Typography, {
+    type: 'p2',
+    style: {
+      lineHeight: '20px',
+      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      cursor: `${readOnly ? 'default' : 'pointer'}`,
+      pointerEvents: `${disabled ? 'none' : 'auto'}`,
+      userSelect: 'none'
+    },
+    mapping: 'div',
+    onClick: e => onClickItem(e, 1)
+  }, ItemName[1]), jsx("span", {
+    css: checkTextDivider
+  }), jsx(Typography, {
+    type: 'p2',
+    style: {
+      lineHeight: '20px',
+      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      cursor: `${readOnly ? 'default' : 'pointer'}`,
+      pointerEvents: `${disabled ? 'none' : 'auto'}`,
+      userSelect: 'none'
+    },
+    mapping: 'div',
+    onClick: e => onClickItem(e, 2)
+  }, ItemName[2]), jsx("span", {
+    css: checkTextDivider
+  }), jsx(Typography, {
+    type: 'p2',
+    style: {
+      lineHeight: '20px',
+      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      cursor: `${readOnly ? 'default' : 'pointer'}`,
+      pointerEvents: `${disabled ? 'none' : 'auto'}`,
+      userSelect: 'none'
+    },
+    mapping: 'div',
+    onClick: e => onClickItem(e, 3)
+  }, ItemName[3]));
+}));
+InterviewStatus.defaultProps = {
+  disabled: false,
+  option: ['status', 'success', 'warning', 'danger']
+};
+InterviewStatus.propsTypes = {
+  /** Prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** Item of CheckText in CheckText component */
+  option: PropTypes.oneOf(['status', 'success', 'warning', 'danger']),
+
+  /** the displayed chosen for each change */
+  chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** The function will run to return a value of CheckText Component */
+  onClick: PropTypes.func,
+
+  /** The function will run to return a value of CheckText Component */
+  onChoose: PropTypes.func
+};
+export default InterviewStatus;

package/components/check-text/interview-confirmation.js

@@ -0,0 +1,172 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+import Typography from '../typography';
+const color = [`${theme.colors.warning}`, `${theme.colors.success}`, `${theme.colors.danger}`];
+const colorNum = {
+  Yes: 0,
+  Maybe: 1,
+  No: 2
+};
+const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  disabled,
+  readOnly,
+  chosen,
+  onClick,
+  onChoose
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const checkText = css`
+        display: inline-flex;
+        color: ${disabled ? theme.colors.disabled : theme.colors.border};
+        div:nth-of-type(1):hover {
+            color: ${color[0]};
+        }
+        div:nth-of-type(2):hover {
+            color: ${color[1]};
+        }
+        div:nth-of-type(3):hover {
+            color: ${color[2]};
+        }
+    `;
+  const checkTextItemText = css`
+        margin-left: 10px;
+    `;
+  const checkTextDivider = css`
+        margin: 2px 19px;
+        width: 2px;
+        height: 16px;
+        background: ${theme.colors.border};
+        border-radius: 1px;
+    `;
+
+  const onClickItem = (e, index) => {
+    const clickedItem = ref.current.querySelectorAll('div');
+    if (readOnly || clickedItem[index].style.color) return;
+    clickedItem.forEach((el, i) => {
+      if (i === index) {
+        el.style.color = color[index];
+      } else if (el.style.color) {
+        el.style.color = null;
+      }
+    });
+    e.selectedItem = {
+      value: e.target.textContent,
+      index
+    };
+    if (onClick) onClick(e);
+    if (onChoose) onChoose(e);
+  };
+
+  useEffect(() => {
+    ref.current.querySelectorAll('div').forEach((el, i) => {
+      if (i === chosen || el.textContent === chosen) {
+        el.style.color = color[isNaN(chosen) ? colorNum[chosen] : chosen];
+      } else if (el.style.color) {
+        el.style.color = null;
+      }
+    });
+  }, [chosen]);
+  return useMemo(() => jsx("div", {
+    css: checkText,
+    ref: ref
+  }, jsx(Typography, {
+    type: 'p2',
+    style: {
+      lineHeight: '20px',
+      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      cursor: `${readOnly ? 'default' : 'pointer'}`,
+      pointerEvents: `${disabled ? 'none' : 'auto'}`,
+      userSelect: 'none'
+    },
+    mapping: 'div',
+    onClick: e => onClickItem(e, 0)
+  }, jsx("svg", {
+    width: "12",
+    height: "8",
+    viewBox: "0 0 12 8",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.57555 8.00004C4.39155 8.00004 4.21555 7.92404 4.08955 7.79004L0.847547 4.33738C0.594881 4.06938 0.608881 3.64738 0.876881 3.39538C1.14555 3.14338 1.56755 3.15671 1.81888 3.42471L4.56888 6.35204L10.1742 0.217377C10.4235 -0.0552893 10.8449 -0.0732893 11.1169 0.174711C11.3882 0.422711 11.4069 0.844711 11.1589 1.11604L5.06755 7.78271C4.94288 7.92004 4.76555 7.99871 4.58021 8.00004H4.57555Z",
+    fill: "currentColor"
+  })), jsx("span", {
+    css: checkTextItemText
+  }, "Yes")), jsx("span", {
+    css: checkTextDivider
+  }), jsx(Typography, {
+    type: 'p2',
+    style: {
+      lineHeight: '20px',
+      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      cursor: `${readOnly ? 'default' : 'pointer'}`,
+      pointerEvents: `${disabled ? 'none' : 'auto'}`,
+      userSelect: 'none'
+    },
+    mapping: 'div',
+    onClick: e => onClickItem(e, 1)
+  }, jsx("svg", {
+    width: "8",
+    height: "12",
+    viewBox: "0 0 8 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, jsx("path", {
+    d: "M7.33335 4C7.33335 3.11594 6.98216 2.2681 6.35704 1.64298C5.73192 1.01786 4.88408 0.666666 4.00002 0.666666C3.11597 0.666666 2.26812 1.01786 1.643 1.64298C1.01788 2.2681 0.666687 3.11594 0.666687 4C0.666687 4.17681 0.736925 4.34638 0.861949 4.4714C0.986974 4.59643 1.15654 4.66667 1.33335 4.66667C1.51016 4.66667 1.67973 4.59643 1.80476 4.4714C1.92978 4.34638 2.00002 4.17681 2.00002 4C2.00002 3.60444 2.11732 3.21776 2.33708 2.88886C2.55684 2.55996 2.8692 2.30362 3.23465 2.15224C3.60011 2.00087 4.00224 1.96126 4.3902 2.03843C4.77816 2.1156 5.13453 2.30608 5.41423 2.58579C5.69394 2.86549 5.88442 3.22186 5.96159 3.60982C6.03876 3.99778 5.99915 4.39991 5.84778 4.76537C5.6964 5.13082 5.44006 5.44318 5.11116 5.66294C4.78226 5.8827 4.39558 6 4.00002 6C3.82321 6 3.65364 6.07024 3.52862 6.19526C3.40359 6.32029 3.33335 6.48986 3.33335 6.66667V8C3.33335 8.17681 3.40359 8.34638 3.52862 8.4714C3.65364 8.59643 3.82321 8.66667 4.00002 8.66667C4.17683 8.66667 4.3464 8.59643 4.47142 8.4714C4.59645 8.34638 4.66669 8.17681 4.66669 8V7.26667C5.4196 7.11298 6.09628 6.70388 6.58222 6.1086C7.06816 5.51332 7.33351 4.76843 7.33335 4Z",
+    fill: "currentColor"
+  }), jsx("path", {
+    d: "M3.99998 11.3333C4.36817 11.3333 4.66665 11.0349 4.66665 10.6667C4.66665 10.2985 4.36817 10 3.99998 10C3.63179 10 3.33331 10.2985 3.33331 10.6667C3.33331 11.0349 3.63179 11.3333 3.99998 11.3333Z",
+    fill: "currentColor"
+  })), jsx("span", {
+    css: checkTextItemText
+  }, "Maybe")), jsx("span", {
+    css: checkTextDivider
+  }), jsx(Typography, {
+    type: 'p2',
+    style: {
+      lineHeight: '20px',
+      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      cursor: `${readOnly ? 'default' : 'pointer'}`,
+      pointerEvents: `${disabled ? 'none' : 'auto'}`,
+      userSelect: 'none'
+    },
+    mapping: 'div',
+    onClick: e => onClickItem(e, 2)
+  }, jsx("svg", {
+    width: "8",
+    height: "8",
+    viewBox: "0 0 8 8",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.94271 3.99992L7.80471 1.13792C8.06538 0.87725 8.06538 0.455917 7.80471 0.19525C7.54405 -0.0654165 7.12271 -0.0654165 6.86205 0.19525L4.00004 3.05725L1.13804 0.19525C0.877378 -0.0654165 0.456045 -0.0654165 0.195378 0.19525C-0.0652888 0.455917 -0.0652888 0.87725 0.195378 1.13792L3.05738 3.99992L0.195378 6.86192C-0.0652888 7.12258 -0.0652888 7.54392 0.195378 7.80458C0.325378 7.93458 0.496045 7.99992 0.666711 7.99992C0.837378 7.99992 1.00804 7.93458 1.13804 7.80458L4.00004 4.94258L6.86205 7.80458C6.99205 7.93458 7.16271 7.99992 7.33338 7.99992C7.50405 7.99992 7.67471 7.93458 7.80471 7.80458C8.06538 7.54392 8.06538 7.12258 7.80471 6.86192L4.94271 3.99992Z",
+    fill: "currentColor"
+  })), jsx("span", {
+    css: checkTextItemText
+  }, "No"))), []);
+}));
+InterviewConfirmation.propsTypes = {
+  /** Prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** the displayed chosen for each change */
+  chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** The function will run to return a value of CheckText Component */
+  onClick: PropTypes.func,
+
+  /** The function will run to return a value of CheckText Component */
+  onChoose: PropTypes.func
+};
+export default InterviewConfirmation;

package/components/check-text/interview-status.js

@@ -0,0 +1,138 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+import Typography from '../typography';
+const color = [`${theme.colors.warning}`, `${theme.colors.success}`, `${theme.colors.danger}`];
+const colorNum = {
+  Scheduled: 0,
+  Started: 1,
+  Cancel: 2
+};
+const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  disabled,
+  readOnly,
+  chosen,
+  onClick,
+  onChoose
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const checkText = css`
+        display: inline-flex;
+        color: ${disabled ? theme.colors.disabled : theme.colors.border};
+        div:nth-of-type(1):hover {
+            color: ${color[0]};
+        }
+        div:nth-of-type(2):hover {
+            color: ${color[1]};
+        }
+        div:nth-of-type(3):hover {
+            color: ${color[2]};
+        }
+    `;
+  const checkTextItemText = css`
+        margin-left: 10px;
+    `;
+  const checkTextDivider = css`
+        margin: 2px 19px;
+        width: 2px;
+        height: 16px;
+        background: ${theme.colors.border};
+        border-radius: 1px;
+    `;
+
+  const onClickItem = (e, index) => {
+    const clickedItem = ref.current.querySelectorAll('div');
+    if (readOnly || clickedItem[index].style.color) return;
+    clickedItem.forEach((el, i) => {
+      if (i === index) {
+        el.style.color = color[index];
+      } else if (el.style.color) {
+        el.style.color = null;
+      }
+    });
+    e.selectedItem = {
+      value: e.target.textContent,
+      index
+    };
+    if (onClick) onClick(e);
+    if (onChoose) onChoose(e);
+  };
+
+  useEffect(() => {
+    ref.current.querySelectorAll('div').forEach((el, i) => {
+      if (i === chosen || el.textContent === chosen) {
+        el.style.color = color[isNaN(chosen) ? colorNum[chosen] : chosen];
+      } else if (el.style.color) {
+        el.style.color = null;
+      }
+    });
+  }, [chosen]);
+  return useMemo(() => jsx("div", {
+    css: checkText,
+    ref: ref
+  }, jsx(Typography, {
+    type: 'p2',
+    style: {
+      lineHeight: '20px',
+      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      cursor: `${readOnly ? 'default' : 'pointer'}`,
+      pointerEvents: `${disabled ? 'none' : 'auto'}`,
+      userSelect: 'none'
+    },
+    mapping: 'div',
+    onClick: e => onClickItem(e, 0)
+  }, jsx("span", {
+    css: checkTextItemText
+  }, "Scheduled")), jsx("span", {
+    css: checkTextDivider
+  }), jsx(Typography, {
+    type: 'p2',
+    style: {
+      lineHeight: '20px',
+      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      cursor: `${readOnly ? 'default' : 'pointer'}`,
+      pointerEvents: `${disabled ? 'none' : 'auto'}`,
+      userSelect: 'none'
+    },
+    mapping: 'div',
+    onClick: e => onClickItem(e, 1)
+  }, jsx("span", {
+    css: checkTextItemText
+  }, "Started")), jsx("span", {
+    css: checkTextDivider
+  }), jsx(Typography, {
+    type: 'p2',
+    style: {
+      lineHeight: '20px',
+      color: `${disabled ? `${theme.colors.disabled} !important` : 'inherit'}`,
+      cursor: `${readOnly ? 'default' : 'pointer'}`,
+      pointerEvents: `${disabled ? 'none' : 'auto'}`,
+      userSelect: 'none'
+    },
+    mapping: 'div',
+    onClick: e => onClickItem(e, 2)
+  }, jsx("span", {
+    css: checkTextItemText
+  }, "Cancel"))), []);
+}));
+InterviewStatus.propsTypes = {
+  /** Prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** the displayed chosen for each change */
+  chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** The function will run to return a value of CheckText Component */
+  onClick: PropTypes.func,
+
+  /** The function will run to return a value of CheckText Component */
+  onChoose: PropTypes.func
+};
+export default InterviewStatus;