Giter Club home page Giter Club logo

Comments (29)

wll8 avatar wll8 commented on September 24, 2024

Maybe it's like using a dom-based third-party library in react.

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

is it possible or not ? If yes please can you provide some example where i can directly use try it out option with redoc. i feel it will be useful for everyone.

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

Sorry, this may not be a good solution.

This is a sample code: <RedocTry tryText="try out" />.

  • react/16.13.1
  • react-dom/16.13.1
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
    <script src="//unpkg.com/@babel/[email protected]/babel.js"></script>
    <script type="text/babel">
      function RedocTry(userCfg) {
        const {
          useEffect
        } = React

        function loadJs(url, callback) {
          var script = document.createElement(`script`)
          script.type = `text/javascript`
          if (typeof callback !== `undefined`) {
            if (script.readyState) {
              script.onreadystatechange = function () {
                if (script.readyState === `loaded` || script.readyState === `complete`) {
                  script.onreadystatechange = null
                  callback()
                }
              }
            } else {
              script.onload = function () {
                callback()
              }
            }
          }
          script.src = url
          document.body.appendChild(script)
        }

        useEffect(() => {
          Promise.all([
            `https://cdn.jsdelivr.net/npm/[email protected]/bundles/redoc.standalone.min.js`,
            `https://cdn.jsdelivr.net/gh/wll8/[email protected]/dist/try.js`
          ].map(item => {
            return new Promise(resolve => {
              loadJs(item, () => resolve(item))
            })
          })).then(() => {
            window.initTry(Object.keys(userCfg).length ? userCfg : `https://petstore.swagger.io/v2/swagger.json`)
          })
        })
        return <div id="redoc-container"></div>
      }

      ReactDOM.render(
        <div>
          <RedocTry tryText="try out" />
        </div>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

Yes. it adding multiple times try-out and it shows blank screen on try-out. I'm trying to pass { redocOptions: { hideLoading: true }
its not working and break in middle.
Below are my some redoc options:

const redocOptions = {
  hideLoading: true,
  hideDownloadButton: true,
  scrollYOffset: 56,
  theme: {
    typography: {
      fontFamily: '"Metric", sans-serif',
      headings: {
        fontFamily: '"Metric", Arial, sans-serif'
      },
      optimizeSpeed: true
    },
    spacing: {
      sectionVertical: 10
    }
  }
};

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

Please can you modify that code sample because it adding multiple times try-out . It would be a great help.

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

What does it mean to add multiple try-out?

Does it mean that there are multiple try-out buttons on the same interface?

If you mean this, then my test did not find this problem. Please provide an example of the smallest reproducible problem, thank you.

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

T_T...

Maybe I have found the problem and it is being solved...

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

I am very sorry for the problems I have brought before. I will definitely go through a complete test in the future.

ReactDOM.render(
  <div>
    <RedocTry tryText="try out" redocOptions={{
        hideLoading: true,
        hideDownloadButton: true,
        scrollYOffset: 56,
        theme: {
          typography: {
            fontFamily: '"Metric", sans-serif',
            headings: {
              fontFamily: '"Metric", Arial, sans-serif'
            },
            optimizeSpeed: true
          },
          spacing: {
            sectionVertical: 10
          }
        }
      }}
    />
  </div>,
  document.getElementById('root')
);

Reference modification record: fix: redocOptions is not recognized correctly

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

Yes it adds try-out button twice.

image

i also see a error in console.
image

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

image
it rendering multiple times and sometime it just show blank with one try-out.

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

Please try this react sample code.

I want to know the system you are using and the browser version.

  • operating system:
  • browser and version:
  • react version:
  • redoc version:
  • redoc-try version:
  • It’s better to have code that can cause problems:

The following is the result of my operation, which can work normally.

image

  • operating system: win10 x64
  • browser and version: chrome 80.0.3987.149 x86
  • react version: 16.13.1 umd
  • redoc version: [email protected]
  • redoc-try version: [email protected]
  • It’s better to have code that can cause problems:

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

Please try this code
To reproduce issue: refresh page multiple times

image
you would see similar in the above image.
i feel it rendering multiple times. Please do the needful.

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

Issue two
open same sandbox in the new page with full screen .i.e https://s3n8l.csb.app/
Redoc is Responsive three-panel design with menu/scrolling synchronization.
Please notice that right panel couldn't able to show entire information. it cut off and doesn't have scrollbar feature to see Entire information. I'm attaching image.
image

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

Multiple try buttons

Thank you for the online code.

Sorry, through your online code, after performing multiple refresh operations, I still haven't seen multiple times of try.

However, I think that the initTry method is executed multiple times due to react rendering multiple times.

You can try to judge that there is already a try button on the page and then no longer run the initTry method.

swagger Small resolution display is truncated

Although this is due to the swagger-ui itself, the container margin of redoc has taken up a part of the space, but I also hope to optimize it.

image

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

Thanks man. I'm able to resolve rendering issue. Now looking forward for the truncated one.

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024 
<RedocStandalone
       specUrl={`/entities/api/v1/spec/?productionServer=${browserLocationOrigin}`}
       options={redocOptions}
       onLoaded={() => {
         setLoading(false);
       }}

If you see the above code you have given example how to pass the specurl, options in redoc-try. Do you have any idea for onLoaded ? is there any way to pass redoc onLoaded property also ?

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

If you want to use every parameter, you can set redocOptions to an array, corresponding to:

[specOrSpecUrl?, options?, element?, callback?]

react example:

<div>
  <RedocTry tryText="try out" redocOptions={[
    `https://petstore.swagger.io/v2/swagger.json`, // specOrSpecUrl
    {}, // options
    undefined, // element
    error => console.log(`onLoaded`, error) // callback
  ]}
  />
</div>

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

How can i override or change swagger ui styling changes ? is there an option to pass in swaggeroptions and override a classname?

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

If you want to use every parameter, you can set redocOptions to an array, corresponding to:

[specOrSpecUrl?, options?, element?, callback?]

react example:

<div>
  <RedocTry tryText="try out" redocOptions={[
    `https://petstore.swagger.io/v2/swagger.json`, // specOrSpecUrl
    {}, // options
    undefined, // element
    error => console.log(`onLoaded`, error) // callback
  ]}
  />
</div>

if i pass in array it doesn't add try-out button

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

The only way is to directly override the css style within the scope of #swagger-ui directly.

Reference code and picture:

try.js#L57

body .swagger-ui .wrapper {
  padding: 0;
}

image

Welcome to contribute optimized css.

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

How can i use try.js file from local instead of cdn ? what are files required if i do from local ?

useEffect(() => {
          Promise.all([
            `https://cdn.jsdelivr.net/npm/[email protected]/bundles/redoc.standalone.min.js`,
            `https://cdn.jsdelivr.net/gh/wll8/[email protected]/try.js`
          ].map(item => {
            return new Promise(resolve => {
              loadJs(item, () => resolve(item))
            })
          })).then(() => {
            window.initTry(Object.keys(userCfg).length ? userCfg : `https://petstore.swagger.io/v2/swagger.json`)
          })
        })
        return <div id="redoc-container"></div>
      }

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

Okay. i'm ready to contribute and before that i want to tell the reason behind my css change. Redoc already provides Responses feature and which again duplicating by swagger ui. i want to hide responses-wrapper class in swagger-ui.
if this change looks fine to you , i can create a PR and do this change.
image

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

How can i use try.js file from local instead of cdn ? what are files required if i do from local ?

Download all the cdn files on the network to the local, and use the local path.

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

if i pass in array it doesn't add try-out button

This is caused by the callback function in the array overwriting the callback function in try.js, which, I think, means you want to override it.

The function of try.js to initialize swagger is done in the callback function.

Reference code:
try.js#L44

from redoc-try.

anupsingh-anup avatar anupsingh-anup commented on September 24, 2024

If i use try.js file and modify as per my needs in local. does it require license ?

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

WTFPL License

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

This question was closed because no response was received. If there are other questions, welcome to open new issues.

from redoc-try.

katriel18 avatar katriel18 commented on September 24, 2024

Hi, can Redoc's try it functionality be enabled somehow, since I'm using this as a component in react and need to make requests?

<RedocStandalone specUrl="http://petstore.swagger.io/v2/swagger.json" options={{ nativeScrollbars: true, theme: { colors: { primary: { main: '#dd5522' } } }, }} />

from redoc-try.

wll8 avatar wll8 commented on September 24, 2024

Is the entire feature enabled? Or trigger a test of a single API via an event?

Neither of the above two functions currently has a direct way.

from redoc-try.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.