@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/permission.js

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import { useSessionContext } from './contexts/session';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Permission({
+  permission,
+  role,
+  component,
+  children
+}) {
+  const {
+    session
+  } = useSessionContext();
+  let can = true;
+  const permissions = [].concat(permission).filter(Boolean);
+  const roles = [].concat(role).filter(Boolean);
+  if (permissions.length) {
+    const userPermissions = session.user && session.user.permissions || [];
+    can = permissions.some(p => userPermissions.includes(p));
+  }
+  if (can && roles.length) {
+    can = roles.includes(session.user.role);
+  }
+  if (typeof component === 'function') {
+    return component(can);
+  }
+  if (typeof children === 'function') {
+    return children(can);
+  }
+  if (can) {
+    return component || children || null;
+  }
+  return null;
+}
+export function withPermission(Component, permissionName, role) {
+  return function WithPermission(props) {
+    return /*#__PURE__*/_jsx(Permission, {
+      permission: permissionName,
+      role: role,
+      children: hasPermission => /*#__PURE__*/_jsx(Component, {
+        ...props,
+        hasPermission: hasPermission
+      })
+    });
+  };
+}
+Permission.propTypes = {
+  permission: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  role: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  component: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+};
+Permission.defaultProps = {
+  permission: '',
+  role: '',
+  component: null,
+  children: null
+};

package/es/relative-time.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import prettyMs from 'pretty-ms-i18n';
+import Tooltip from '@mui/material/Tooltip';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatPrettyMsLocale, formatToDatetime } from './util';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function RelativeTime({
+  value
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  if (!value) {
+    return '-';
+  }
+  const prettyOption = {
+    locale: formatPrettyMsLocale(locale),
+    compact: true
+  };
+  const valTime = new Date(value).getTime();
+  const now = Date.now();
+  if (valTime > now) {
+    const time = prettyMs(valTime - now, prettyOption);
+    return /*#__PURE__*/_jsx(Tooltip, {
+      title: formatToDatetime(value, locale),
+      placement: "top-end",
+      enterTouchDelay: 0,
+      children: /*#__PURE__*/_jsx("span", {
+        children: t('common.afterTime', {
+          time
+        })
+      })
+    });
+  }
+  const time = prettyMs(now - valTime, prettyOption);
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: formatToDatetime(value, locale),
+    placement: "top-end",
+    enterTouchDelay: 0,
+    children: /*#__PURE__*/_jsx("span", {
+      children: t('common.timeAgo', {
+        time
+      })
+    })
+  });
+}
+RelativeTime.propTypes = {
+  value: PropTypes.any
+};
+RelativeTime.defaultProps = {
+  value: ''
+};

package/es/result-message.js

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+import ResultMessage from '@blocklet/launcher-layout/lib/launch-result-message';
+const StyledResultMessage = styled(ResultMessage)`
+  && .result-footer {
+    height: 120px;
+    > div {
+      flex-wrap: wrap;
+    }
+  }
+`;
+export default StyledResultMessage;

package/es/schema-form/color-input.js

@@ -0,0 +1,98 @@
+import { useState, useRef, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Popover from '@mui/material/Popover';
+import { ChromePicker } from 'react-color';
+import commonPropTypes from './common-prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ColorInput({
+  editing,
+  value,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const colorElm = useRef();
+  const colorValue = useRef(value);
+
+  // auto open color picker when editing, should wait the useRef to be ready
+  useEffect(() => {
+    let timer = null;
+    if (editing) {
+      timer = setTimeout(() => {
+        setOpen(true);
+      }, 50);
+    }
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [editing]);
+  const onColorChange = color => {
+    colorValue.current = color;
+    onChange(color);
+  };
+  const handleEnterKeyDown = () => {
+    setOpen(false);
+    onChange(colorValue.current);
+  };
+  const ReadView = /*#__PURE__*/_jsx(Box, {
+    className: "form-item-input slot",
+    px: 1,
+    children: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      children: [value, value !== 'auto' && /*#__PURE__*/_jsx("div", {
+        style: {
+          marginLeft: 4,
+          backgroundColor: value,
+          width: '1em',
+          height: '1em',
+          borderRadius: '0.2em'
+        }
+      })]
+    })
+  });
+  const EditView = /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    flexGrow: 1,
+    alignItems: "center",
+    height: "40px",
+    onKeyDown: handleEnterKeyDown,
+    children: [/*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      alignItems: "center",
+      onClick: () => setOpen(true),
+      children: /*#__PURE__*/_jsx("div", {
+        ref: colorElm,
+        style: {
+          flexShrink: 0,
+          marginLeft: '8px',
+          backgroundColor: value,
+          width: '32px',
+          height: '32px',
+          boxSizing: 'border-box',
+          borderRadius: '8px',
+          border: '1px solid #eee',
+          cursor: value === 'auto' ? 'default' : 'pointer'
+        }
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: colorElm.current,
+      onClose: () => setOpen(false),
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      children: /*#__PURE__*/_jsx(ChromePicker, {
+        color: value,
+        onChange: c => onColorChange(c.hex)
+      })
+    })]
+  });
+  return editing ? EditView : ReadView;
+}
+ColorInput.propTypes = commonPropTypes;

package/es/schema-form/common-prop-types.js

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+export default {
+  description: PropTypes.string,
+  editing: PropTypes.bool,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+  // eslint-disable-next-line react/no-unused-prop-types
+  value: PropTypes.any,
+  // eslint-disable-next-line react/no-unused-prop-types
+  componentProps: PropTypes.object,
+  render: PropTypes.func,
+  renderFormItem: PropTypes.func
+};

package/es/schema-form/index.js

@@ -0,0 +1,215 @@
+import { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import EditIcon from '@arcblock/icons/lib/EditIcon';
+import CloseIcon from '@mui/icons-material/Close';
+import DoneIcon from '@mui/icons-material/Done';
+import IconButton from '@mui/material/IconButton';
+import CircularProgress from '@mui/material/CircularProgress';
+import ColorInput from './color-input';
+import TextInput from './text-input';
+import PassportInput from './passport-input';
+import Required from '../form/required';
+import FormWrapper from '../form/form-wrapper';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function getComponent(item, {
+  editing = false
+}) {
+  const {
+    componentType = 'input',
+    render,
+    renderFormItem
+  } = item;
+  // if provided renderItem and editing is true, use it
+  if (editing && renderFormItem) {
+    return renderFormItem;
+  }
+
+  // if provided render and editing is false, use it
+  if (!editing && render) {
+    return render;
+  }
+  const componentMap = {
+    input: TextInput,
+    color: ColorInput,
+    passport: PassportInput
+  };
+  return componentMap[componentType?.toLowerCase()];
+}
+export default function SchemaForm({
+  schema,
+  loading,
+  value,
+  defaultValue,
+  onChange,
+  style,
+  disabled
+}) {
+  const isControlled = Object.prototype.toString.call(value) === '[object Object]';
+  const [editingItem, setEditingItem] = useState(null);
+  const [formValues, setFormValues] = useState(isControlled ? value : defaultValue);
+  const editingItemInitialValue = useRef();
+  function onFormItemChange(item, changeValue, action) {
+    const {
+      key,
+      secure
+    } = item;
+    const oldValue = formValues[key];
+    const isChanged = oldValue !== changeValue;
+    const newValues = {
+      ...formValues,
+      [key]: changeValue
+    };
+    if (isChanged) {
+      setFormValues(newValues);
+    }
+    onChange({
+      [key]: changeValue
+    }, {
+      allValues: newValues,
+      action,
+      currentItem: item
+    });
+
+    // hide secure text after confirm
+    if (action === 'confirm' && secure) {
+      setFormValues({
+        ...formValues,
+        [key]: '__encrypted__'
+      });
+    }
+    if (['confirm', 'cancel'].includes(action)) {
+      onItemEditingStatusChange(null);
+    } else {
+      onItemEditingStatusChange(item);
+    }
+  }
+  function onItemEditingStatusChange(item) {
+    if (item) {
+      editingItemInitialValue.current = formValues[item.key];
+      setEditingItem(item);
+      return;
+    }
+    editingItemInitialValue.current = null;
+    setEditingItem(null);
+  }
+  function getValue(item, {
+    editing = false
+  }) {
+    const {
+      key
+    } = item;
+    const currentValue = isControlled ? value[key] : formValues[key];
+    if (currentValue === '__encrypted__') {
+      if (!editing) {
+        return '******';
+      }
+      return '';
+    }
+    return currentValue;
+  }
+  return /*#__PURE__*/_jsx(StyledFormWrapper, {
+    className: "form",
+    style: style,
+    children: schema?.map(x => {
+      const {
+        key,
+        description,
+        required,
+        hidden = false,
+        componentProps = {}
+      } = x;
+      if (hidden) {
+        return null;
+      }
+      const editing = !!(editingItem && key === editingItem.key);
+      const currentValue = getValue(x, {
+        editing
+      });
+      // get component by componentType
+      const CurrentComponent = getComponent(x, {
+        editing
+      });
+      const renderComponentProps = {
+        inputProps: {
+          'data-cy': 'schema-form-item-component'
+        },
+        key,
+        description,
+        editing,
+        value: currentValue,
+        onChange: (changeValue, action = 'change') => onFormItemChange(x, changeValue, action),
+        componentProps
+      };
+      return /*#__PURE__*/_jsxs(Box, {
+        className: "form-item",
+        children: [/*#__PURE__*/_jsxs(Box, {
+          className: "form-item-label",
+          style: {
+            color: required && !currentValue ? '#ff0000' : '#333'
+          },
+          children: [description, required && /*#__PURE__*/_jsx(Required, {})]
+        }), /*#__PURE__*/_jsxs(Box, {
+          className: "form-item-body",
+          children: [/*#__PURE__*/_jsx(Box, {
+            className: "form-item-input",
+            children: /*#__PURE__*/_jsx(CurrentComponent, {
+              ...renderComponentProps
+            })
+          }), /*#__PURE__*/_jsx(Box, {
+            className: "form-item-action",
+            children: editing ? /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(IconButton, {
+                "data-cy": "schema-form-item-confirm",
+                onClick: () => {
+                  onFormItemChange(x, currentValue, 'confirm');
+                },
+                disabled: disabled || loading,
+                size: "large",
+                children: loading ? /*#__PURE__*/_jsx(CircularProgress, {
+                  size: 24
+                }) : /*#__PURE__*/_jsx(DoneIcon, {})
+              }), /*#__PURE__*/_jsx(IconButton, {
+                "data-cy": "schema-form-item-cancel",
+                onClick: () => {
+                  onFormItemChange(x, editingItemInitialValue.current, 'cancel');
+                },
+                disabled: disabled || loading,
+                size: "large",
+                children: /*#__PURE__*/_jsx(CloseIcon, {})
+              })]
+            }) : /*#__PURE__*/_jsx(IconButton, {
+              "data-cy": "schema-form-item-edit",
+              onClick: () => {
+                onFormItemChange(x, formValues[key], 'edit');
+              },
+              disabled: disabled || editingItem,
+              size: "large",
+              children: /*#__PURE__*/_jsx(EditIcon, {})
+            })
+          })]
+        })]
+      }, key);
+    })
+  });
+}
+SchemaForm.propTypes = {
+  schema: PropTypes.array.isRequired,
+  loading: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.object,
+  defaultValue: PropTypes.object,
+  style: PropTypes.object,
+  disabled: PropTypes.bool
+};
+SchemaForm.defaultProps = {
+  loading: false,
+  value: undefined,
+  defaultValue: {},
+  style: {},
+  disabled: false
+};
+const StyledFormWrapper = styled(FormWrapper)``;

package/es/schema-form/passport-input.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import createPassportSvg from '@abtnode/auth/lib/util/create-passport-svg';
+import { getPassportColorFromDid } from '@arcblock/nft-display';
+import { getDisplayName } from '@blocklet/meta/lib/util';
+import ColorInput from './color-input';
+import commonPropTypes from './common-prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function PassportInput({
+  editing,
+  value,
+  onChange,
+  componentProps,
+  ...rest
+}) {
+  const {
+    blocklet
+  } = componentProps;
+  const color = value === 'auto' ? getPassportColorFromDid(blocklet.appDid) : value;
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    children: [/*#__PURE__*/_jsx("img", {
+      style: {
+        width: 96,
+        marginRight: 12
+      },
+      alt: "",
+      src: createPassportSvg({
+        title: 'Owner',
+        issuer: getDisplayName(blocklet),
+        issuerDid: blocklet.appDid,
+        ownerName: 'Your Name',
+        ownerDid: blocklet.appDid,
+        isDataUrl: true,
+        preferredColor: value || 'auto'
+      })
+    }), /*#__PURE__*/_jsx(ColorInput, {
+      ...rest,
+      editing: editing,
+      value: editing ? color : value,
+      onChange: onChange,
+      componentProps: componentProps
+    })]
+  });
+}
+PassportInput.propTypes = {
+  ...commonPropTypes,
+  componentProps: PropTypes.shape({
+    blocklet: PropTypes.object.isRequired
+  }).isRequired
+};
+PassportInput.defaultProps = {};

package/es/schema-form/text-input.js

@@ -0,0 +1,57 @@
+import { useRef } from 'react';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import commonPropTypes from './common-prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function TextInput({
+  editing,
+  description,
+  value,
+  onChange,
+  componentProps,
+  ...rest
+}) {
+  const {
+    placeholder
+  } = componentProps;
+  const inputValue = useRef(value);
+
+  // enter keydown
+  const handleKeydown = e => {
+    if (e.key === 'Enter') {
+      onChange(inputValue.current, 'confirm');
+    }
+  };
+  const onInputChange = changeValue => {
+    inputValue.current = changeValue;
+    onChange(changeValue);
+  };
+  if (editing) {
+    return /*#__PURE__*/_jsx(TextField, {
+      style: {
+        flex: 1
+      },
+      fullWidth: true,
+      value: value,
+      onChange: e => {
+        e.persist();
+        onInputChange(e.target.value);
+      },
+      autoFocus: true,
+      size: "small",
+      variant: "outlined",
+      placeholder: description || placeholder,
+      onKeyDown: handleKeydown,
+      ...rest
+    });
+  }
+  return /*#__PURE__*/_jsx(Box, {
+    px: 1,
+    className: "form-item-input slot",
+    children: value
+  });
+}
+TextInput.propTypes = commonPropTypes;
+TextInput.defaultProps = {
+  componentProps: {}
+};