lodash#has JavaScript Examples

constructor (props) {
    super(props)
    let min = ''
    let max = ''
    const { facet } = props
    if (has(facet, 'integerFilter') && facet.integerFilter !== null) {
      const { integerFilter } = facet
      min = integerFilter.start
      max = integerFilter.end
    }
    this.state = { min, max }
  }

function ImageUpload(props) {
	const { image } = props;

	let value = image ? image : "";

	function getLeastOneSize(s, media) {
		let { sizes } = media;

		for (const size of s) {
			if (has(sizes, size)) {
				return sizes[size];
				break;
			} else continue;
		}
	}

	return (
		<MediaUploadCheck>
			<MediaUpload
				onSelect={media => {
					let sizes = ["thumbnail", "medium", "large"],
						imageWithDimensions = getLeastOneSize(sizes, media);

					props.onSelect(imageWithDimensions);
				}}
				allowedTypes={["image"]}
				value={value}
				render={({ open }) => (
					<Button isDefault onClick={open}>
						<Icon icon={props.icon} />
					</Button>
				)}
			/>
		</MediaUploadCheck>
	);
}

VideoPage = props => {
  const classes = useStyles(props)
  const { instanceTableData } = props.perspectiveState
  const { portalConfig, perspectiveConfig, localID, resultClass, screenSize, layoutConfig } = props
  let { properties } = props

  const readyToRenderVideoPlayer = () => {
    return `http://ldf.fi/warmemoirsampo/${localID}` === instanceTableData.id &&
        has(instanceTableData, 'youTubeID')
  }

  if (!has(instanceTableData, 'warsaPage')) {
    properties = properties.filter(prop => prop.id !== 'warsaPage')
  }

  return (
    <div className={classes.root}>
      <Grid className={classes.mainContainer} container spacing={1}>
        <Grid className={classes.gridItem} item xs={12} sm={12} md={7}>
          <Paper className={classes.videoPlayerContainer}>
            {readyToRenderVideoPlayer() &&
              <Player
                resultClass={props.resultClass}
                data={instanceTableData}
                location={useLocation()}
                videoPlayerState={props.videoPlayerState}
                updateVideoPlayerTime={props.updateVideoPlayerTime}
              />}
          </Paper>
          <Paper className={classes.tableContainer}>
            <InstancePageTable
              portalConfig={portalConfig}
              perspectiveConfig={perspectiveConfig}
              resultClass={resultClass}
              data={instanceTableData}
              properties={properties}
              screenSize={screenSize}
              layoutConfig={layoutConfig}
            />
          </Paper>
        </Grid>
        <Grid className={classes.gridItem} item xs={12} sm={12} md={5}>
          <Paper className={classes.tableOfContents}>
            <Typography variant='h6' component='h2'>Sisällysluettelo</Typography>
            {has(instanceTableData, 'timeSlice') &&
              <VideoTableOfContents
                instanceTableData={instanceTableData}
                toc={instanceTableData.timeSlice}
                textFormat='plain-text-from-text-slice'
                // textFormat='annotated-html-from-text-slice'
                // textFormat='annotated-html-from-time-slice'
                videoPlayerState={props.videoPlayerState}
              />}
          </Paper>
        </Grid>
      </Grid>
    </div>
  )
}

function TagList(props) {
	const { onSelect, data } = props;

	const mapList = (list) => {
		return !isEmpty(list)
			? list.map((tag, index) => {
					const title = get(tag, "title");
					const Tag = get(tag, "tag");

					return (
						<MenuItem className="cwp-tag-option" onClick={() => onSelect(Tag)}>
							<strong>{title}</strong>
							<span>{Tag}</span>
						</MenuItem>
					);
			  })
			: null;
	};

	const getList = () => {
		const requiredList = props.list;

		switch (requiredList) {
			case "fields":
				let fieldsTagList = isEmpty(data)
					? getFieldsTags(props.clientId, false)
					: data;

				return fieldsTagList.map((field, index) => {
					const id = get(field, "field_id");

					const label = get(field, "fieldName");
					const tag = `{{${id}}}`;

					return (
						<MenuItem className="cwp-tag-option" onClick={() => onSelect(tag)}>
							<strong>{isEmpty(label) ? __("No Label", 'cwp-gutenberg-forms') : label}</strong>
							<span>{tag}</span>
						</MenuItem>
					);
				});
			case "wordpress":
				const wpTags = isEmpty(data) ? getWordpressTags() : data;
				return mapList(wpTags);
			case "form":
				const formTags = isEmpty(data) ? getFormTags() : data;
				return mapList(formTags);
			case "meta":
				const metaTags = isEmpty(data) ? getMetaTags() : data;
				return mapList(metaTags);
			case "other":
				const otherTags = isEmpty(data) ? getOtherTags() : data;
				return mapList(otherTags);
		}
	};

	const noStyling = has(props, "noStyling");
	const classes = noStyling ? "no-styling" : "";

	const listToMap = getList();

	return (
		<div className={`cwp-tagList ${classes}`}>
			{!isEmpty(listToMap) ? (
				<MenuGroup>{listToMap}</MenuGroup>
			) : (
				<div className="cwp-empty-list">
					<h3>{__('No Tags Found !', 'cwp-gutenberg-forms')}</h3>
				</div>
			)}
		</div>
	);
}

/**
   * deal field's attribute change
   */
  handleFieldValuesChange(props, changeValues, allValues) {
    // 使用 allValues 重写 field 的属性
    const { field, component, onRefresh } = this.props;
    const { validateFields } = this.editFormRef.current || {};
    if (validateFields) {
      validateFields(err => {
        if (!err) {
          const newConfig = [];
          field[fieldLabelProp] = allValues[fieldLabelProp];
          field[fieldNameProp] = allValues[fieldNameProp];
          // fields's common prop;
          field.requiredFlag = allValues.requiredFlag;
          // 不要 visiableFlag 字段了
          // field.visiableFlag = allValues.visiableFlag;
          // todo 字段的 enabledFlag 不能编辑了
          // field.enabledFlag = allValues.enabledFlag;
          field.description = allValues.description;
          field.align = allValues.align;

          if (has(changeValues, 'autoSize')) {
            // autoSize 有更改才改变 width
            if (allValues.autoSize) {
              field.width = 0; // can set field width in right only when autoSize is 0
            } else {
              field.width = autoSizeWidth;
            }
          }

          const getConfigOfPropValuesFunc = `get${field.componentType}ConfigOfPropValues`;

          if (this[getConfigOfPropValuesFunc]) {
            this[getConfigOfPropValuesFunc](allValues, newConfig);
          }

          const prevFieldConfigs = field.config;
          field.config = newConfig.map(fieldConfig => {
            const prevFieldConfig = find(
              prevFieldConfigs,
              prevC => prevC[attributeNameProp] === fieldConfig[attributeNameProp]
            );
            return { ...prevFieldConfig, ...fieldConfig };
          });
          const newField = field; // { ...field };
          // 更新 feild 在 component 中的引用
          let fieldRefUpdate = false;
          forEach(component.fields, (f, index) => {
            if (f === field) {
              fieldRefUpdate = true;
              component.fields[index] = newField;
              return false;
            }
            return !fieldRefUpdate;
          });
          if (isFunction(onRefresh)) {
            onRefresh();
          }
        }
      });
    }
  }

render () {
    const { facetClass, resultClass, resultCount, someFacetIsFetching, screenSize } = this.props
    const mobileMode = screenSize === 'xs' || screenSize === 'sm'
    const { facets } = this.props.facetState
    const uriFilters = {}
    const spatialFilters = {}
    const textFilters = {}
    const timespanFilters = {}
    const dateNoTimespanFilters = {}
    const integerFilters = {}
    let activeUriFilters = false
    let activeSpatialFilters = false
    let activeTextFilters = false
    let activeTimespanFilters = false
    let activeDateNoTimespanFilters = false
    let activeIntegerFilters = false
    Object.entries(facets).forEach(entry => {
      const [key, value] = entry
      if (has(value, 'uriFilter') && value.uriFilter !== null) {
        activeUriFilters = true
        uriFilters[key] = value.uriFilter
      }
      if (has(value, 'spatialFilter') && value.spatialFilter !== null) {
        activeSpatialFilters = true
        spatialFilters[key] = value.spatialFilter._bounds
      }
      if (has(value, 'textFilter') && value.textFilter !== null) {
        activeTextFilters = true
        textFilters[key] = value.textFilter
      }
      if (has(value, 'timespanFilter') && value.timespanFilter !== null) {
        activeTimespanFilters = true
        timespanFilters[key] = value.timespanFilter
      }
      if (has(value, 'dateNoTimespanFilter') && value.dateNoTimespanFilter !== null) {
        activeDateNoTimespanFilters = true
        dateNoTimespanFilters[key] = value.dateNoTimespanFilter
      }
      if (has(value, 'integerFilter') && value.integerFilter !== null) {
        activeIntegerFilters = true
        integerFilters[key] = value.integerFilter
      }
    })
    return (
      <>
        {this.props.fetchingResultCount
          ? <CircularProgress size={26} />
          : (
            <Typography
              component='h2'
              variant={this.getTypographyVariant()}
              sx={{
                fontWeight: 'bold',
                fontSize: '1rem'
              }}
            >
              {intl.get('facetBar.results')}: {resultCount} {intl.get(`perspectives.${resultClass}.facetResultsType`)}
            </Typography>
            )}
        {!mobileMode &&
          <Divider
            sx={theme => ({
              marginTop: theme.spacing(0.5),
              marginBottom: theme.spacing(0.5)
            })}
          />}
        {(activeUriFilters ||
          activeSpatialFilters ||
          activeTextFilters ||
          activeTimespanFilters ||
          activeDateNoTimespanFilters ||
          activeIntegerFilters
        ) &&
          <>
            <Box
              sx={{
                display: 'flex',
                justifyContent: 'space-between'
              }}
            >
              <Typography component='h2' variant={this.getTypographyVariant()}>{intl.get('facetBar.activeFilters')}</Typography>
              <Button
                variant='contained'
                color='secondary'
                size='small'
                startIcon={<DeleteIcon />}
                onClick={this.handleRemoveAllFiltersOnClick}
                disabled={someFacetIsFetching}
                sx={theme => ({
                  margin: theme.spacing(1)
                })}
              >{intl.get('facetBar.removeAllFilters')}
              </Button>
            </Box>
            <ActiveFilters
              facetClass={facetClass}
              uriFilters={uriFilters}
              spatialFilters={spatialFilters}
              textFilters={textFilters}
              timespanFilters={timespanFilters}
              dateNoTimespanFilters={dateNoTimespanFilters}
              integerFilters={integerFilters}
              updateFacetOption={this.props.updateFacetOption}
              someFacetIsFetching={someFacetIsFetching}
              fetchingResultCount={this.props.fetchingResultCount}
              fetchFacet={this.props.fetchFacet}
              propertiesTranslationsID={this.props.propertiesTranslationsID}
            />
            <Divider
              sx={theme => ({
                marginTop: theme.spacing(0.5),
                marginBottom: theme.spacing(0.5)
              })}
            />
          </>}
        {!mobileMode &&
          <Typography
            component='h2'
            variant={this.getTypographyVariant()}
            sx={{
              fontWeight: 'bold',
              fontSize: '1rem'
            }}
          >
            {intl.get('facetBar.narrowDownBy')}:
          </Typography>}
      </>
    )
  }

DemarcheSectionReadOnly = ({ scrollableId, availableScopes }) => {
  const { enrollment, demarches } = useContext(FormContext);

  const { demarche: selectedDemarcheId } = enrollment;
  const {
    user: { roles },
  } = useAuth();

  const [modifiedFields, setModifiedFields] = useState([]);
  const [modifiedScopes, setModifiedScopes] = useState({});

  useEffect(() => {
    if (
      demarches[selectedDemarcheId] &&
      demarches[selectedDemarcheId].state &&
      enrollment
    ) {
      const demarcheState = merge(
        {},
        get(demarches, 'default', {}).state,
        get(demarches, selectedDemarcheId, {}).state
      );
      setModifiedFields(findModifiedFields(demarcheState, enrollment));
      setModifiedScopes(findModifiedScopes(demarcheState, enrollment));
    }
  }, [enrollment, selectedDemarcheId, demarches]);

  const hasSelectedDemarche =
    has(demarches, selectedDemarcheId) && selectedDemarcheId !== 'default';

  return (
    <>
      <ScrollablePanel scrollableId={scrollableId}>
        <h2>Les modèles pré-remplis</h2>
        <div>
          {hasSelectedDemarche ? (
            <>
              <p>
                Ce formulaire a été pré-rempli selon le cas d’usage suivant :{' '}
                <i>
                  {get(demarches, selectedDemarcheId, {}).label ||
                    selectedDemarcheId}
                </i>
              </p>
              {!isEmpty(roles) && !isEmpty(modifiedFields) && (
                <p>
                  Certaines des sections pré-remplies par le cas d’usage ont été
                  modifiées.
                </p>
              )}
              {!isEmpty(modifiedScopes) && (
                <>
                  <p>
                    Les périmètres de données suivants ont notamment été
                    modifiés par rapport au modèle pré-rempli :
                  </p>
                  <ul>
                    {Object.entries(modifiedScopes).map(([key, value]) => (
                      <li key={key}>
                        <strong>{valueToLabel(key, availableScopes)} :</strong>
                        {value ? (
                          <span className="text--red">
                            {' '}
                            <WarningEmoji /> Nouvelle donnée demandée
                          </span>
                        ) : (
                          <span className="text--green"> Donnée décochée</span>
                        )}
                      </li>
                    ))}
                  </ul>
                </>
              )}
            </>
          ) : (
            <>
              Cette habilitation n’a pas utilisé de modèle de pré-remplissage.
            </>
          )}
        </div>
      </ScrollablePanel>
    </>
  );
}

function Condition(props) {
	let currentField = props.fieldName,
		{ clientId, condition } = props; // where props.set === props.setAttributes

	useEffect(() => {
		let first_field = getOptions()[1];

		if (
			!isEmpty(first_field) &&
			has(first_field, "value") &&
			isEmpty(condition.value)
		) {
			handleConditionChange(first_field.value, "field");
		}
	}, []);

	const getOptions = () => {
		let fields = [
			{
				value: null,
				label: __("Select Field", 'cwp-gutenberg-forms'),
			},
		];

		// function getSiblings( clientId ) => return the relatives of the particular field inside a parent/root block

		getSiblings(clientId).forEach((sibling) => {
			if (!has(sibling, "label") && !has(sibling, "field_name")) return;
			const { label, field_name } = sibling; //destructuring the label attribute from the sibling field..

			fields.push({ value: field_name, label: label }); //pushing the option to the select field
			//where field_name is the unique id of the field;
		});

		return fields;
	};

	const handleConditionChange = (value, type) => {
		const newCondition = clone(condition); //creating a copy of the existing condition;

		set(newCondition, type, value); //modifying the condition copy;

		props.set({ condition: newCondition }); //props.setAttributes()
	};

	let operators = [
		{
			value: "===",
			label: __("Is Equal To", 'cwp-gutenberg-forms'),
		},
		{
			value: "!==",
			label: __("Not Equal To", 'cwp-gutenberg-forms'),
		},
	];

	const getValueType = () => {
		if (isEmpty(condition.field)) return null;

		const splitted_fieldName = condition.field.split("-"),
			fieldName = splitted_fieldName[0];

		const siblings = getSiblings(clientId);

		let currentSibling = siblings.filter(
				(v) => v.field_name === condition.field
			),
			selectOptions;

		if (
			fieldName === "select" ||
			fieldName === "radio" ||
			fieldName === "checkbox"
		) {
			if (has(currentSibling[0], "options")) {
				const generatedOptions = currentSibling[0].options.map((v) => {
					return {
						...v,
						value: v.label,
					};
				});

				generatedOptions.unshift({
					label: __( "Select Value", 'cwp-gutenberg-forms'),
					value: "",
				});

				selectOptions = generatedOptions;
			}
		}

		switch (fieldName) {
			case "radio":
				return (
					<SelectControl
						value={condition.value}
						onChange={(val) => {
							handleConditionChange(val, "value");
						}}
						options={selectOptions}
					/>
				);

			case "checkbox":
				return (
					<SelectControl
						multiple
						value={condition.value}
						onChange={(val) => {
							handleConditionChange(val, "value");
						}}
						options={selectOptions}
					/>
				);

			case "select":
				return (
					<SelectControl
						value={condition.value}
						onChange={(val) => {
							handleConditionChange(val, "value");
						}}
						options={selectOptions}
					/>
				);

			default: {
				return (
					<TextControl
						value={condition.value}
						placeholder={__("value", 'cwp-gutenberg-forms')}
						onChange={(val) => handleConditionChange(val, "value")}
					/>
				);
			}
		}
	};

	return (
		<div className="cwp-form-condition-component">
			<div className="cwp-option">
				<PanelRow>
					<h3>Use Condition</h3>
					<FormToggle
						checked={props.useCondition}
						onChange={() => {
							if (props.useCondition === false) {
								props.set({ isRequired: false });
							}
							props.set({
								enableCondition: !props.useCondition,
							});
						}}
					/>
				</PanelRow>
			</div>

			{props.useCondition && (
				<Fragment>
					<h3>Show if</h3>
					<SelectControl
						value={condition.field}
						options={getOptions()}
						onChange={(field) => {
							handleConditionChange(field, "field");
						}}
					/>
					<SelectControl
						onChange={(operator) => {
							handleConditionChange(operator, "condition");
						}}
						value={condition.condition}
						options={operators}
					/>
					{getValueType()}
				</Fragment>
			)}
		</div>
	);
}