@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/components/InputUID/Options/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import getTrad from '../../../utils/getTrad';
+import OptionsWrapper from './wrapper';
+import Option from './Option';
+import OptionsTitle from './OptionsTitle';
+import RightOptionLabel from './RightOptionLabel';
+
+const Options = ({ options, title }) => (
+  <OptionsWrapper>
+    {title && <OptionsTitle>{title}</OptionsTitle>}
+    {options.map(option => (
+      <Option key={option.id} onClick={option.onClick}>
+        <div>{option.label}</div>
+        <FormattedMessage id={getTrad('components.uid.apply')}>
+          {msg => <RightOptionLabel className="right-label">{msg}</RightOptionLabel>}
+        </FormattedMessage>
+      </Option>
+    ))}
+  </OptionsWrapper>
+);
+
+Options.propTypes = {
+  options: PropTypes.array.isRequired,
+  title: PropTypes.string,
+};
+
+Options.defaultProps = {
+  title: null,
+};
+
+export default Options;

package/admin/src/components/InputUID/Options/wrapper.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const wrapper = styled.div`
+  position: absolute;
+  width: 100%;
+  margin-top: 3px;
+  border: 1px solid ${props => props.theme.main.colors.border};
+  border-radius: 2px;
+  background-color: white;
+  z-index: 11;
+`;
+
+export default wrapper;

package/admin/src/components/InputUID/RegenerateButton.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const RegenerateButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 32px;
+  background-color: #fafafb;
+  z-index: 10;
+
+  &:hover {
+    cursor: pointer;
+    background-color: #aed4fb;
+  }
+`;
+
+export default RegenerateButton;

package/admin/src/components/InputUID/RightContent.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+const RightContent = styled.div`
+  display: flex;
+  z-index: 10;
+  background-color: ${({ theme }) => theme.main.colors.white};
+  align-items: center;
+  line-height: 32px;
+  right: 1px;
+  top: 1px;
+  position: absolute;
+`;
+
+export default RightContent;

package/admin/src/components/InputUID/RightContentLabel.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const RightContentLabel = styled.div`
+  padding: 0 5px;
+  text-transform: capitalize;
+  font-size: 1.3rem;
+  color: ${({ theme, color }) => theme.main.colors[color]};
+`;
+
+export default RightContentLabel;

package/admin/src/components/InputUID/RightLabel.js

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Success, Remove } from '@buffetjs/icons';
+import { useGlobalContext } from 'strapi-helper-plugin';
+
+import pluginId from '../../pluginId';
+import getTrad from '../../utils/getTrad';
+import RightContentLabel from './RightContentLabel';
+
+const RightLabel = ({ isAvailable }) => {
+  const { formatMessage } = useGlobalContext();
+
+  return isAvailable ? (
+    <>
+      <Success fill="#27b70f" width="20px" height="20px" />
+      <RightContentLabel color="green">
+        {formatMessage({
+          id: `${pluginId}.components.uid.available`,
+        })}
+      </RightContentLabel>
+    </>
+  ) : (
+    <>
+      <Remove fill="#ff203c" width="9px" height="9px" />
+      <RightContentLabel color="red">
+        {formatMessage({
+          id: getTrad('components.uid.unavailable'),
+        })}
+      </RightContentLabel>
+    </>
+  );
+};
+
+RightLabel.propTypes = {
+  isAvailable: PropTypes.bool,
+};
+
+RightLabel.defaultProps = {
+  isAvailable: false,
+};
+
+export default RightLabel;

package/admin/src/components/InputUID/SubLabel.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const SubLabel = styled.p`
+  padding-top: 10px;
+  line-height: normal;
+  font-size: 1.3rem;
+`;
+
+export default SubLabel;

package/admin/src/components/InputUID/Wrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  padding-bottom: 27px;
+`;
+
+export default Wrapper;

package/admin/src/components/InputUID/index.js

@@ -0,0 +1,325 @@
+import React, { useEffect, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Sync } from '@buffetjs/icons';
+import { ErrorMessage, Description } from '@buffetjs/styles';
+import { Label, Error } from '@buffetjs/core';
+import { useDebounce, useClickAwayListener } from '@buffetjs/hooks';
+import styled from 'styled-components';
+import {
+  request,
+  LabelIconWrapper,
+  LoadingIndicator,
+  useGlobalContext,
+  useContentManagerEditViewDataManager,
+} from 'strapi-helper-plugin';
+import { FormattedMessage } from 'react-intl';
+import { get } from 'lodash';
+import getTrad from '../../utils/getTrad';
+import pluginId from '../../pluginId';
+import getRequestUrl from '../../utils/getRequestUrl';
+import RightLabel from './RightLabel';
+import Options from './Options';
+import RegenerateButton from './RegenerateButton';
+import RightContent from './RightContent';
+import Input from './InputUID';
+import Wrapper from './Wrapper';
+import SubLabel from './SubLabel';
+import UID_REGEX from './regex';
+import RightContentLabel from './RightContentLabel';
+
+const InputContainer = styled.div`
+  position: relative;
+`;
+const Name = styled(Label)`
+  display: block;
+  text-transform: capitalize;
+  margin-bottom: 1rem;
+`;
+
+// This component should be in buffetjs. It will be used in the media lib.
+// This component will be the strapi custom dropdown component.
+// TODO : Make this component generic -> InputDropdown.
+// TODO : Use the Compounds components pattern
+// https://blog.bitsrc.io/understanding-compound-components-in-react-23c4b84535b5
+const InputUID = ({
+  attribute,
+  contentTypeUID,
+  description,
+  error: inputError,
+  label: inputLabel,
+  labelIcon,
+  name,
+  onChange,
+  validations,
+  value,
+  editable,
+  ...inputProps
+}) => {
+  const { modifiedData, initialData, layout } = useContentManagerEditViewDataManager();
+  const [isLoading, setIsLoading] = useState(false);
+  const [availability, setAvailability] = useState(null);
+  const [isSuggestionOpen, setIsSuggestionOpen] = useState(true);
+  const [isCustomized, setIsCustomized] = useState(false);
+  const [label, setLabel] = useState();
+  const debouncedValue = useDebounce(value, 300);
+  const debouncedTargetFieldValue = useDebounce(modifiedData[attribute.targetField], 300);
+  const wrapperRef = useRef(null);
+  const generateUid = useRef();
+  const initialValue = initialData[name];
+  const createdAtName = get(layout, ['options', 'timestamps', 0]);
+  const isCreation = !initialData[createdAtName];
+  const { formatMessage } = useGlobalContext();
+
+  generateUid.current = async (shouldSetInitialValue = false) => {
+    setIsLoading(true);
+    const requestURL = getRequestUrl('uid/generate');
+    try {
+      const { data } = await request(requestURL, {
+        method: 'POST',
+        body: {
+          contentTypeUID,
+          field: name,
+          data: modifiedData,
+        },
+      });
+
+      onChange({ target: { name, value: data, type: 'text' } }, shouldSetInitialValue);
+      setIsLoading(false);
+    } catch (err) {
+      console.error({ err });
+      setIsLoading(false);
+    }
+  };
+
+  const checkAvailability = async () => {
+    setIsLoading(true);
+
+    const requestURL = getRequestUrl('uid/check-availability');
+
+    if (!value) {
+      return;
+    }
+
+    try {
+      const data = await request(requestURL, {
+        method: 'POST',
+        body: {
+          contentTypeUID,
+          field: name,
+          value: value ? value.trim() : '',
+        },
+      });
+      setAvailability(data);
+
+      if (data.suggestion) {
+        setIsSuggestionOpen(true);
+      }
+      setIsLoading(false);
+    } catch (err) {
+      console.error({ err });
+      setIsLoading(false);
+    }
+  };
+
+  // FIXME: we need to find a better way to autofill the input when it is required.
+  // useEffect(() => {
+  //   if (!value && validations.required) {
+  //     generateUid.current(true);
+  //   }
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
+
+  useEffect(() => {
+    if (
+      debouncedValue &&
+      debouncedValue.trim().match(UID_REGEX) &&
+      debouncedValue !== initialValue
+    ) {
+      checkAvailability();
+    }
+    if (!debouncedValue) {
+      setAvailability(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValue, initialValue]);
+
+  useEffect(() => {
+    let timer;
+
+    if (availability && availability.isAvailable) {
+      timer = setTimeout(() => {
+        setAvailability(null);
+      }, 4000);
+    }
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [availability]);
+
+  useEffect(() => {
+    if (
+      !isCustomized &&
+      isCreation &&
+      debouncedTargetFieldValue &&
+      modifiedData[attribute.targetField]
+    ) {
+      generateUid.current(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedTargetFieldValue, isCustomized, isCreation]);
+
+  useClickAwayListener(wrapperRef, () => setIsSuggestionOpen(false));
+
+  const handleFocus = () => {
+    if (availability && availability.suggestion) {
+      setIsSuggestionOpen(true);
+    }
+  };
+
+  const handleSuggestionClick = () => {
+    setIsSuggestionOpen(false);
+    onChange({ target: { name, value: availability.suggestion, type: 'text' } });
+  };
+
+  const handleGenerateMouseEnter = () => {
+    setLabel('regenerate');
+  };
+
+  const handleGenerateMouseLeave = () => {
+    setLabel(null);
+  };
+
+  const handleChange = (e, canCheck, dispatch) => {
+    if (!canCheck) {
+      dispatch({
+        type: 'SET_CHECK',
+      });
+    }
+
+    dispatch({
+      type: 'SET_ERROR',
+      error: null,
+    });
+
+    if (e.target.value && isCreation) {
+      setIsCustomized(true);
+    }
+
+    onChange(e);
+  };
+
+  return (
+    <Error
+      name={name}
+      inputError={inputError}
+      type="text"
+      validations={{ ...validations, regex: UID_REGEX }}
+    >
+      {({ canCheck, onBlur, error, dispatch }) => {
+        const hasError = Boolean(error);
+
+        return (
+          <Wrapper ref={wrapperRef}>
+            <Name htmlFor={name}>
+              <span>{inputLabel}</span>
+              {labelIcon && (
+                <LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>
+              )}
+            </Name>
+            <InputContainer>
+              <Input
+                {...inputProps}
+                containsEndAdornment={editable}
+                editable={editable}
+                error={hasError}
+                onFocus={handleFocus}
+                name={name}
+                onChange={e => handleChange(e, canCheck, dispatch)}
+                type="text"
+                onBlur={onBlur}
+                // eslint-disable-next-line no-irregular-whitespace
+                value={value || ''}
+              />
+              <RightContent>
+                {label && (
+                  <RightContentLabel color="blue">
+                    {formatMessage({
+                      id: getTrad('components.uid.regenerate'),
+                    })}
+                  </RightContentLabel>
+                )}
+                {!isLoading && !label && availability && (
+                  <RightLabel
+                    isAvailable={availability.isAvailable || value === availability.suggestion}
+                  />
+                )}
+                {editable && (
+                  <RegenerateButton
+                    onMouseEnter={handleGenerateMouseEnter}
+                    onMouseLeave={handleGenerateMouseLeave}
+                    onClick={() => generateUid.current()}
+                  >
+                    {isLoading ? (
+                      <LoadingIndicator small />
+                    ) : (
+                      <Sync fill={label ? '#007EFF' : '#B5B7BB'} width="11px" height="11px" />
+                    )}
+                  </RegenerateButton>
+                )}
+              </RightContent>
+              {availability && availability.suggestion && isSuggestionOpen && (
+                <FormattedMessage id={`${pluginId}.components.uid.suggested`}>
+                  {msg => (
+                    <Options
+                      title={msg}
+                      options={[
+                        {
+                          id: 'suggestion',
+                          label: availability.suggestion,
+                          onClick: handleSuggestionClick,
+                        },
+                      ]}
+                    />
+                  )}
+                </FormattedMessage>
+              )}
+            </InputContainer>
+            {!hasError && description && <SubLabel as={Description}>{description}</SubLabel>}
+            {hasError && <SubLabel as={ErrorMessage}>{error}</SubLabel>}
+          </Wrapper>
+        );
+      }}
+    </Error>
+  );
+};
+
+InputUID.propTypes = {
+  attribute: PropTypes.object.isRequired,
+  contentTypeUID: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  editable: PropTypes.bool,
+  error: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  labelIcon: PropTypes.shape({
+    icon: PropTypes.node.isRequired,
+    title: PropTypes.string,
+  }),
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  validations: PropTypes.object,
+  value: PropTypes.string,
+};
+
+InputUID.defaultProps = {
+  description: '',
+  editable: false,
+  error: null,
+  labelIcon: null,
+  validations: {},
+  value: '',
+};
+
+export default InputUID;

package/admin/src/components/InputUID/regex.js

@@ -0,0 +1,3 @@
+const UID_REGEX = new RegExp(/^[A-Za-z0-9-_.~]*$/);
+
+export default UID_REGEX;