mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
test: Adds storybook to AnchorLink component (#13406)
This commit is contained in:
parent
c3e19b2cf1
commit
51f05ea257
@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import AnchorLink from '.';
|
||||
|
||||
export default {
|
||||
title: 'AnchorLink',
|
||||
component: AnchorLink,
|
||||
};
|
||||
|
||||
export const InteractiveAnchorLink = (args: any) => (
|
||||
<AnchorLink anchorLinkId="link" {...args} />
|
||||
);
|
||||
|
||||
const PLACEMENTS = ['right', 'left', 'top', 'bottom'];
|
||||
|
||||
InteractiveAnchorLink.args = {
|
||||
showShortLinkButton: true,
|
||||
placement: PLACEMENTS[0],
|
||||
};
|
||||
|
||||
InteractiveAnchorLink.argTypes = {
|
||||
type: {
|
||||
placement: { type: 'select', options: PLACEMENTS },
|
||||
},
|
||||
};
|
||||
|
||||
InteractiveAnchorLink.story = {
|
||||
parameters: {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
};
|
@ -20,9 +20,9 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { t } from '@superset-ui/core';
|
||||
|
||||
import URLShortLinkButton from './URLShortLinkButton';
|
||||
import getDashboardUrl from '../dashboard/util/getDashboardUrl';
|
||||
import getLocationHash from '../dashboard/util/getLocationHash';
|
||||
import URLShortLinkButton from 'src/components/URLShortLinkButton';
|
||||
import getDashboardUrl from 'src/dashboard/util/getDashboardUrl';
|
||||
import getLocationHash from 'src/dashboard/util/getLocationHash';
|
||||
|
||||
const propTypes = {
|
||||
anchorLinkId: PropTypes.string.isRequired,
|
@ -1,60 +0,0 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React, { ReactNode, useState } from 'react';
|
||||
import Button from 'src/components/Button';
|
||||
|
||||
interface Props {
|
||||
items: string[] | ReactNode[];
|
||||
display?: number;
|
||||
}
|
||||
|
||||
function intersperse(arr: any[], sep: string | ReactNode) {
|
||||
if (arr.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return arr.slice(1).reduce((xs, x) => xs.concat([sep, x]), [arr[0]]);
|
||||
}
|
||||
|
||||
export default function ExpandableList({ items, display = 3 }: Props) {
|
||||
const [showingAll, setShowingAll] = useState(false);
|
||||
const toggleShowingAll = () => setShowingAll(!showingAll);
|
||||
const itemsToDisplay = items.slice(0, display);
|
||||
const showMoreAction = items.length > display;
|
||||
|
||||
const lessAction = (
|
||||
<Button buttonStyle="link" buttonSize="xsmall" onClick={toggleShowingAll}>
|
||||
less
|
||||
</Button>
|
||||
);
|
||||
const moreAction = (
|
||||
<Button buttonStyle="link" buttonSize="xsmall" onClick={toggleShowingAll}>
|
||||
{items.length - itemsToDisplay.length} more
|
||||
</Button>
|
||||
);
|
||||
return (
|
||||
<span>
|
||||
{showingAll
|
||||
? intersperse(items, ', ')
|
||||
: intersperse(itemsToDisplay, ', ')}
|
||||
{showMoreAction && ','}
|
||||
{showMoreAction && (showingAll ? lessAction : moreAction)}
|
||||
</span>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user